在旋转时使用 MVVM 更新 Kendo NumericTextBox答案

【问题标题】：Update Kendo NumericTextBox with MVVM on spin在旋转时使用 MVVM 更新 Kendo NumericTextBox
【发布时间】：2014-07-13 10:57:36
【问题描述】：

看一下 MVVM 示例here：

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

这是我尝试过的：

在旋转事件中，我尝试做

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

这有效，但有奇怪的副作用。

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

另一种重现此问题的方法是从here (jsbin)获取代码

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

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

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

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

【问题讨论】：

标签： javascript jquery mvvm kendo-ui kendonumerictextbox

【解决方案1】：

我检查了您的jsbin，发现 html 和 javascript 中有一些错误。我认为当您测试不同的代码时，您忘记了更正它。无论如何，我清理并更正了您的代码并将它们放到这个jsfiddle。

设置断点后 (debugger;) 我看到你是对的 onSpin 事件无限触发，但是如果你在事件中设置断点，就会发生这种奇怪的行为。如果您删除断点并放置console.log("onSpinevent 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);

【讨论】：

感谢清理并确认我的复制品，很高兴知道我没有疯。问题出在 Firefox 中，它没有断点重现。Chrome 和 IE 都很好。
@Matt 我只是在 IE10 和 FF29 中测试，它们都没有重现没有断点的问题！打开 ff 控制台并转到 jsfiddle 点击 spins 每次点击都会触发一次onSpin。
对不起，如果 DOM 很大，它会在 FF 中重现，我应该指定
@Matt：用viewModel.set("selectedNumber", e.sender._value); 替换$("#ntb").getKendoNumericTextBox().trigger("change"); 怎么样？试一试。
这不是错误！当有断点时，焦点将到达调试窗口，这会打乱组件的行为。它认为您从未停止点击，因此它会无限增加……直到您点击页面上的某个位置。

【解决方案2】：

剑道支持说要在旋转事件中运行它：

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

这样问题就迎刃而解了。

【讨论】：

【解决方案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}" />

这将在后台调用更改事件:)

【讨论】：