0

我将以下 KendoUI 模板绑定到可观察对象。当我将新项目推送到可观察数组时，如何将 kendoNumericTextBox 仅应用于模板中的新项目？

如果我按类申请，它会产生一种奇怪的效果，即现有数字文本框上的微调器加倍。 

<div id="slots">
        <table class="table table-striped table-condensed" style="width:auto;">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Volunteers Needed</th>
                    <th>
                        Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i>
                    </th>
                </tr>
            </thead>
            <tbody data-template="row-template" data-bind="source: slots">
            </tbody>
        </table>

    </div>



 $(document).ready(function () {
          var viewModel = kendo.observable({
                slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }]
              });
          kendo.bind($("#slots"), viewModel);
          $(".numeric").kendoNumericTextBox({
              format: "n0"
          });

          viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" });

          $(".numeric").kendoNumericTextBox({
              format: "n0"
          });  
 });

谢谢你的帮助！

4

1 回答 1

1

尝试将您的模板定义为：

<script type="text/x-kendo-tmpl" id="row-template">
    <tr>
        <td>#= DateText #</td>
        <td>#= ShiftLabel #</td>
        <td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td>
        <td>#= ReservationCode #</td>
    </tr>
</script>

并删除$(".numeric").kendoNumericTextBox(...)初始化。这样做您应该在NumericTextBox每次运行模板时都有一个（每行一个）。

你的 JavaScript 是这样的：

$(document).ready(function () {
    var viewModel = kendo.observable({
        slots: [
            {DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" }
        ]
    });
    kendo.bind($("#slots"), viewModel);

    viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" });
});

看到它在这里运行http://jsfiddle.net/OnaBai/BV48W/

原因： 您使用 CSS 类 ( ) 的事实.numeric导致您最终在另一个内部拥有一个 KendoUI 数字文本框。

示例：您有以下 HTML：

<label>Number 1: <input id="number1" class="numeric"/></label>
<label>Number 2: <input id="number2" class="numeric"/></label>

And the JavaScript

$(document).ready(function () {
    $(".numeric").kendoNumericTextBox({
        format: "n0"
    });
    $(".numeric").kendoNumericTextBox({
        format: "n0"
    });
});

You will see what you called strange effect of doubling the spinners on the existing numeric textboxes.

Each time that you invoke kendoNumericTextBox using .numeric selector you add one extra spinner to the element. If it does not have a spinner (data just added to viewModel) it gets one but if then you add data and invoke kendoNumericTextBox using .numeric selector, that previous element gets another.

于 2013-03-05T23:08:16.847 回答