Question

我正在使用Kendo UI MVVM，我正在尝试将其绑定到自动执行匿名模块化功能。长话短说，它只是有点工作。如果我检查页面但UI不是，则模块正在更新。我正在使用的是一个简短的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”，我会看到我期望的信息，但是UI不是很好玩。我去过Telerik网站上的很多页面并且我已经咨询了谷歌，但通常我的搜索几乎没有结果，我做获得的结果不太有用。

我的想法是，剑道不会像常规属性一样观察模块，但是之后我再也没有使用任何类型的JS模块，而且我对MVVM很新。

Answer 1

你的想法是正确的。剑道不会观察到嵌套属性，即使它没有嵌套，你总是要使用“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" />

视图模型：

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

Kendo MVVM绑定到自执行匿名模块功能

1 个答案: