html - Kendo MVVM 绑定(bind)到自执行匿名模块功能

Question

我正在使用 Kendo UI MVVM，并尝试将其绑定(bind)到自动执行的匿名模块化函数。长话短说，它只是有点工作。如果我检查页面但用户界面未更新，则模块正在更新。我使用的只是一个简短的 HTML 文件，其中包含用于连接 MVVM 的脚本标记和用于引入模块的外部 JavaScript 文件。

页面上的 HTML 和 JS

<!-- Adding information -->
<input data-bind="value: DemoField" />

<!-- Update Button -->
<button data-bind="events: { click: updateModule }">Update</button>

<!-- Trying to update this field -->
<input data-bind="value: module.Model.Demo.DemoField" />

<!-- Observable -->
<script type="text/javascript">

    var model = kendo.observable(
        {
            DemoField: "",

            updateModule: function () {
                module.updateInformation({
                    demoField: this.get("DemoField")
                )};
            }
        },
        module
    );

    kendo.bind($("#form"), invoiceModel);

</script>

模块JS文件

var module = (function () {

    // private information
    var _demo = (function () {
        var _demoObject = {},
            _demoField = null;

        Object.defineProperty(_demoObject, "DemoField", {
            get: function () { return _demoField; }
        });

        _demoObject.updateInformation = function (updatedObject) {
            if (updatedObject.demoField) {
                _demoField = updatedObject.demoField;
            }
        };

        return _demoObject;
    }());        

    var _model = { Demo: _demo };

    // public information
    return {
        Model: _model
        updateInformation: _demo.updateInformation
    }
}());

如果我在检查器中输入“module.Model.Fields.FieldName”，我会看到我期望的信息，但用户界面运行得不太好。我访问过 Telerik 网站上的许多页面，也咨询过 Google，但通常我的搜索几乎不会产生结果，而且我得到的结果也没什么用处。

我的想法是，kendo 不会像常规属性那样观察模块，但话又说回来，我以前没有使用过任何类型的 JS 模块，而且我对 MVVM 非常陌生。

Answer 1

你的想法是正确的。 Kendo 不会观察嵌套属性，即使它不是嵌套的，您也始终必须使用“get”和“set”字样，对于 Angular 中的引用，您不需要这样做。

所以你的代码应该看起来像这样:

<input data-bind="value: DemoField" />

<!-- Update Button -->
<button data-bind="events: { click: updateModule }">Update</button>

<!-- Trying to update this field -->
<input data-bind="value: updatedValue" />

和 View 模型:

var model = kendo.observable({
    DemoField: "",

    updateModule: function () {
      module.updateInformation({
        demoField: this.get("DemoField")
      });
      this.set("updatedValue", module.Model.Demo.DemoField);
    },

    updatedValue: "",
  });

  kendo.bind($("#form"), model);

这里是带有工作示例的 dojo 链接:

http://dojo.telerik.com/UzUhi