MVVM-KendoNumericTextBox 在不触发 'change' 两次的情况下恢复以前的值

Question

我正在使用 Kendo MVVM，并且我有一个 kendo numerictextbox 绑定到一个 kendo observable。我想要的是：当用户更改值时，确认应该弹出类似 'are you sure?' 的内容，如果是 -> 没问题，继续。如果没有 -> 什么都不应该发生！

理论上这听起来很简单......但我发现了 3 个主要问题：

1) numerictextbox 只有 2 个事件：旋转和改变...所以任何使用 keypress/focus/or 任何其他事件的想法都会被丢弃。

2) 所以尝试使用更改事件...但我无法阻止默认！另一种尝试是保存以前的值并在 'no answer' 的情况下将其恢复，但这使我触发事件更改两次！

3) 任何其他 'observing' 数字文本框的模型字段都会在我回答确认框之前更改...我绝对不想要这个！

P.S。我还有一个下拉列表和一个日期选择器，它们必须以相同的方式工作！

请帮忙！

提供了一个快速示例：http://dojo.telerik.com/EyItE 在这里您可以看到 numericbox2（正在观察 numericbox1 并被计算）如何在用户回答 yes/no（问题 3）之前改变自己 keypress/focus/preventDefault 不起作用。

Answer 1

这里是关于默认不支持的绑定事件的回答： Kendo MVVM and binding or extending custom events

为preventDefault（或"reverting"值）。我试着按照你的建议存储以前的值，但它没有触发两次：

var viewModel = kendo.observable({
    myItem: { 
      // fields, etc
      myNumericBox: 10,
      myNumericBox2: function () {
        return viewModel.get("myItem.myNumericBox")*2;
      },
      tmp: 10
    },
    onChange: function (e) {
        if ( confirm("are you sure?")) {
                viewModel.set("myItem.tmp", viewModel.get("myItem.myNumericBox"));
          }
          else {
              viewModel.set("myItem.myNumericBox", viewModel.get("myItem.tmp"));

          }
    },
  tryf: function () {
    alert("hello!"); // doesn't trigger
  },
  tryk: function() {
    alert("hello2!"); // doesn't trigger
  }

});

Answer 2

我通过自定义绑定解决了问题，要求您在 html 小部件更改 -> 模型更新之间进行确认。

kendo.data.binders.widget.valueConfirm = kendo.data.Binder.extend({
            init: function (widget, bindings, options) { // start
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                this.widget = widget;
                this._change = $.proxy(this.change, this);
                this.widget.bind("change", this._change); // observe
            },
            refresh: function () { // when model change
                if (!this._initChange) {
                    var widget = this.widget;
                    var value = this.bindings.valueConfirm.get(); // value of the model
                    if (widget.ns == ".kendoDropDownList") { // for the dropdown i have to use select
                        widget.select(function (d) {
                            return d.id == value.id;
                        });
                    }
                    else widget.value(value); // update widget
                }
            },
            change: function () { // when html item change
                var widget = this.widget;
                if (widget.ns == ".kendoDropDownList") var value = widget.dataItem(); // for dropdown i need dataitem
                else var value = widget.value();

                var old = this.bindings.valueConfirm.get();
                    this._initChange = true;
                    // I want to bypass the confirm if the value is not valid (for example after 1st load with blank values).
                    if (old == null || old == 'undefined' || old == 'NaN') this.bindings.valueConfirm.set(value); // Update the View-Model
                    else {
                        if (confirm("Are you sure?")) {
                            this.bindings.valueConfirm.set(value); // Update the View-Model
                        }
                        else {
                            this._initChange = false;
                            this.refresh(); // Reset old value
                        }
                    }
                this._initChange = false;
            },
            destroy: function () { // dunno if this is useful
                this.widget.unbind("change", this._change);
            }
        });

MVVM-KendoNumericTextBox 在不触发 'change' 两次的情况下恢复以前的值

MVVM-KendoNumericTextBox restore previous value without triggering 'change' twice

kendo-ui

kendo-mvvm

kendo-dropdown

kendo-datepicker

kendonumerictextbox