Kendo ui 使用NumericTextbox可观察的KendoUI模板

我将下面的KendoUI模板绑定到一个可观察对象。当我将一个新项推送到可观察数组中时，如何仅将KendUnumericTextBox应用到模板中的新项

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

<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"
          });  
 });

日期
时间
志愿者需要
预约密码
$（文档）.ready（函数（）{
var viewModel=kendo.observable({
时隙：[{DateText:'1/8/1969'，ShiftLabel:'3:00至5:00'，时隙：2，预订代码：“ABC”}]
});
kendo.bind（$（“#槽”），viewModel）；
$（“.numeric”）.kendonumeric文本框({
格式：“n0”
});
推送（{DateText:'1/8/1969'，ShiftLabel:'3:00到5:00'，slot:2，ReservationCode:'ABC}）；
$（“.numeric”）.kendonumeric文本框({
格式：“n0”
});  
});

---

谢谢你的帮助

尝试将模板定义为：

<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>

看到它在这里跑了吗

原因： 使用CSS类（

.numeric

）会导致在另一个类中有一个KendoUI数值文本框

示例：您有以下HTML：

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

您将看到在现有数字文本框上加倍微调器的奇怪效果

每次使用

.numeric

选择器调用

kendoNumericTextBox

时，都会向元素添加一个额外的微调器。如果它没有微调器（数据刚刚添加到

viewModel

），它会得到一个微调器，但是如果您添加数据并使用

.numeric

选择器调用

kendonumericstextbox

，前面的元素会得到另一个微调器。

使用

数据格式=“n0”

（我已经更新了包含它的答案）。

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

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