将knockoutjs绑定到javascript对象属性

时间:2017-05-30 08:40:29

标签: javascript knockout.js devextreme

我是Knockoutjs的新手,所以请耐心等待。

我想knocoutjs将DxForm(DevExpress)绑定到javascript对象属性,但是我收到错误..."无法读取属性' items'未定义"。

我不确定这是否是一个淘汰赛问题,DevExpress问题或者我的编码技能不足。

这是我的代码......

HTML:

<div data-bind="dxForm: frm.options"></div>

Javascript:

var viewModel = function() {
    var that = this;

    // -----------------------------------------------------------------
    // Faste...
    // -----------------------------------------------------------------
    that.frm = {
       items: ko.observable(undefined),
       data: ko.observable(undefined),
       instance: ko.observable({}),
       options: {
          items: that.frm.items,
          formData: that.frm.data,
          onInitialized: function(e) {
             that.frm.instance(e.component);
          },
       },
    };

    return {
       frm: that.frm,
    };

 };

 var vm = new viewModel();
 ko.applyBindings(vm);

 var items = [{
    "dataField": "test",
    "editorOptions": {
       "type": "date",
       "pickerType": "calendar",
    },
    "editorType": "dxDateBox",
    "name": "Test",
    "visible": true
 }];

 var data = {
    test: 10,
 };

 vm.frm.data(data);
 vm.frm.items(items);

JSFiddle:https://jsfiddle.net/MojoDK/ke395v2c/3/

我想绑定到对象,因为我将使用几个DxForm对象,我喜欢将代码保存到对象中的每个DxForm(更易于阅读)。

知道它失败的原因吗?

感谢。

1 个答案:

答案 0 :(得分:2)

你的 frm 中的关闭问题。

frm 对象中的 属性不存在,您应该使用 this ......

但是在 onInitialized功能中, 不会定位您的 viewModel 对象...... < / p>

所以这样,最简单的方法是稍后声明选项对象:

 that.frm = {
       items: ko.observable(undefined),
       data: ko.observable(undefined),
       instance: ko.observable({})
    };

         that.frm.options = {
          items: that.frm.items,
          formData: that.frm.data,
          onInitialized: function(e) {
             that.frm.instance(e.component);
          },
       };

更新了jsfiddle