将Kendo Observable绑定到我的视图不起作用

时间:2013-11-06 21:45:04

标签: mvvm kendo-ui

我们在ASP.NET MVC 4项目中使用Durandal JS:

我只是试图将一些observable绑定到我的Html View,如下所示:

 <div id="nodetype" class="k-block ">
     <div class="pull-left" >
         <h3>Enter HVaR Parameters</h3>
          <ul>
            <li>
             <label>Liquidataion Days):  </label>
             <input id="liquidDays" data-bind="value: LiquidDays" class="k-textbox" />
            </li>
          </ul>
      </div>                    
  </div>                    

然而,“LiquidDays”可观察值仍为“0”。 我期待下面的ViewModel代码会更新“LiquidDays”,因此将其绑定到我的html文本字段:

ViewModel代码:

 var vm = kendo.observable({
    activate: activate,
    onclickUpdate: UpdateMyStuff,
    title: title,
    LiquidDays: 0,
    ConfLevelPct: 99,
    periodType: "",
    attached: function (view) {
        loadHVarConfig();     
        kendo.bind($("#nodetype"), vm);           
    },
});
return vm;

这是我的Ajax调用服务器端的绑定函数:

 function loadHVarConfig() {        

    // LOAD CONFIG PARAMETERS !!
    var jq = $.ajax({
        url: '/api/breeze/GetVaRConfig',
        type: "get",
        dataType: "json",
        contentType: 'application/json',            
    });
    jq.success(function (data) {
        bindHvarParams(data);              // ON SUCCESS BIND TO VIEW MODEL
    });

    }

    function bindHvarParams(data) {        

      // Set ViewModel properties from data array
      vm.set("LiquidDays", data[0].liquidationDays);        
      vm.LiquidDays = data[0].liquidationDays;
      vm.ConfLevelPct = data[0].confidenceLevel;
      vm.numOfObserv = data[0].historicPeriodLength_size;   
      vm.periodType = data[0].historicPeriodLength_unit;
      vm.holidayCal = data[0].calendarId;
      vm.startDateFixedPeriod = data[0].historicPeriodStart;

    }

我正在使用此链接作为指南,但我遗漏了一些内容:http://docs.kendoui.com/getting-started/framework/mvvm/observableobject

谢谢你。 鲍勃

2 个答案:

答案 0 :(得分:1)

kendo mvvm逻辑仅在执行kendo.bind()方法后才有效。 你在可观察的附加函数中使用了kendo.bind(),但你调用了附加方法。

For more details refer this 

working demo

答案 1 :(得分:0)

首先,请确保按照此处列出的步骤让Kendo和Durandal相互配合:http://durandaljs.com/documentation/KendoUI/

其次,如果您按照上述说明操作,为了使模型绑定起作用,您必须在HTML标记上使用正确的data-属性。对于Durandal绑定,它是data-bind="",对于Kendo绑定,它是data-kendo-bind=""

第三,由于上述步骤,你不能将Durandal(又名。淘汰赛)风格绑定与剑道风格绑定混合在一起。它们是完全独家的,彼此不兼容。这意味着您不能拥有仅在Kendo observable中使用Durandal的任何函数或属性。更明确地说,你不应该将activateattached放在Kendo可观察的内部。你应该像这样返回viewmodel:

return {
  activate: activate,
  attached: attached,
  viewModel: kendo.obeservable({
    onclickUpdate: UpdateMyStuff,
    title: title,
    LiquidDays: 0,
    ConfLevelPct: 99,
    periodType: ""
  })
};