剑道MVVM绑定到自执行匿名模块函数

Kendo MVVM Binding to Self Executing Anonymous Module Function

本文关键字：模块 函数 执行 MVVM 绑定 剑道      更新时间：2023-09-26

我正在使用剑道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。

你的想法是正确的。Kendo不会观察到一个嵌套的属性，即使它没有嵌套，你也必须总是使用"get"answers"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 Model:

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

相关文章：