Обновите Kendo NumericTextBox с помощью MVVM при вращении

Question

Взгляните на пример MVVM здесь:

Как я могу получить значение MVVM для обновления на событии вращения (нажав стрелки вверх или вниз)

Вот что я попробовал:

В спине, я пытался сделать

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

Это сработало, но имело странные побочные эффекты.

Если в DOM достаточно элементов, событие вращения будет продолжаться.

Другой способ воспроизвести это - взять код отсюда (jsbin).

Вставьте его в файл HTML, загрузите его в Chrome или FF, а затем вставьте точку останова в эту строку:

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

Продолжайте нажимать, продолжайте, и вы увидите, что точка останова получает удар раз за разом.

В Firefox, если мой DOM достаточно большой, я получаю репродукцию без точки останова.

Answer 1

Я проверил ваш jsbin и я видел некоторые ошибки в HTML и JavaScript. Я думаю, что пока вы тестировали разные коды, вы забыли исправить это. В любом случае я вычищаю и исправляю ваши коды и помещаю их в это jsfiddle,

После установки точки останова (debugger;) Я видел, что ты прав onSpin событие срабатывает бесконечно, но это странное действие происходит, если вы ставите точку останова в событии. Если вы удалите точку останова и поставить console.log(" onSpin 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

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}" />

это вызовет событие изменения под капотом:)