Question

看一下MVVM示例here：

如何在旋转事件上更新MVVM值（单击向上或向下箭头）

以下是我的尝试：

在旋转事件中，我试图做

$("#ntb").getKendoNumericTextBox().trigger("change");

虽然有效，但副作用很奇怪。

如果DOM上有足够的元素，旋转事件将继续触发。

重现此方法的另一种方法是从here (jsbin)

获取代码

将其插入HTML文件，将其加载到Chrome或FF中，然后在此行插入一个断点：

$("#ntb").getKendoNumericTextBox().trigger("change");

继续点击继续，你会看到断点一次又一次地被击中。

在firefox中，如果我的DOM足够大，我会得到一个没有断点的repro。

Answer 1

我检查了你的jsbin，我在html和javascript中看到了一些错误。我想当你测试不同的代码时，你忘了纠正它。无论如何，我清理并更正您的代码，并将它们放到jsfiddle。

在放置断点（debugger;）之后，我看到你是无限的onSpin事件触发器，但是如果你在事件中设置一个断点，就会发生这种奇怪的行为。如果删除断点并将console.log("放在旋转event triggered.");上，您会看到一切正常，事件只触发一次。

我之前在不同情况下遇到过此类问题，例如使用alert()代替console.log()进行调试。

代码：

var viewModel = kendo.observable({
    selectedNumber: 0,
    isEnabled: true,
    isVisible: true,
    onSpin: function () {
        //debugger;
        console.log("`onSpin` event triggered.");
        $("#ntb").getKendoNumericTextBox().trigger("change");
    },
    onChange: function () {}
});
kendo.bind($("#example"), viewModel);

Answer 2

Kendo支持说在旋转事件中运行它：

this.set('selectedNumber', e.sender.element.val());

这会让问题消失。

Answer 3

您可以尝试以下代码。它对我有用。

视图模型

viewModel.bind("change", function (e) {
        console.log("property Changed on spin ");
    });

剃刀代码

<input id="tbSlideDuration" data-role="numerictextbox"
                             data-format="#"
                             data-min="1"
                             data-max="100"
                             data-bind="value:slideDuration, events: {spin:change}" />

这将调用引擎盖下的更改事件：）

在旋转时使用MVVM更新Kendo NumericTextBox

3 个答案: