可在模态窗口中观察

可在模态窗口中观察

问题描述:

我正在使用SPA。我正在使用RequireJS和kendo路由。可在模态窗口中观察

define(['kendo'],function(kendo) { 

router.route("/SomePage/", function() { 
      require(['MyViewModel', 'text!MyTemplate'], function (viewModel, view) { 
       loadView("#main-content", viewModel, view); 
      }); 
     }); 
var loadView = function(container, viewModel, view) { 
      var kendoView = new kendo.View(view, { model: viewModel }); 
       layout.showIn(container, kendoView); 
     }; 
} 

(代码以上工作非常好)

有通过可观察到的物体从服务器响应填充剑术网格。网格中的每一行都有按钮,它打开模态窗口。在窗口中将会动态生成单选按钮组。

所以,我有MyViewModel.js

define(['GridDataSource','RadioBtnDataSource'],function(ds, ds2){ 

    var GridViewModel = kendo.observable({ 
     gridDS: ds, 

     openModalWin: function (e) { 

      var modalWindow = $("#actions-modal-window").kendoWindow({}).data("kendoWindow").open(); 
      modalWindow.center(); 

      //radiobuttons view model 
      var actionsViewModel = kendo.observable({ 

       //actions: ds2 
       actions: [ 
        { id: "id1", lable: "Send to black hole" }, 
        { id: "id2", lable: "Shred" } 
       ] 
      }); 

      kendo.bind($("#radioBtnGroup"), actionsViewModel); 
     } 
    }); 

return cileGridViewModel; 
}); 

这里是我的HTML模板:

<div class="panel-body">< 

       <div id="cile-table" 
        data-role="grid" 
        data-editable="window" 
        data-bind="source: gridDS" 
        data-columns='[ 
        {"field": "ID"}, 
        {"field": "Name"}, 
        {"template":"<a href=\"\\#/SomePage/\" data-bind=\"click: openModalWin \">Open</a>"}, 
       ]'></div> 

       <div id="actions-modal-window" 
        data-role="window" 
        data-visible="false" 
        data-modal="true" 
        data-width="55%" 
        data-height="600"> 

         <ul data-bind="source: actions" data-template="ul-template" id="radioBtnGroup"></ul> 

         <script id="ul-template" type="text/x-kendo-template"> 
          <li> 
           <input type="radio" name="hcEnd" id="hc1" data-bind="attr: {id: id}" /> 
           <label data-bind="attr: {for: id}, text:lable"></label><br /> 
          </li> 
         </script> 
       </div> 
     </div> 
</div> 

没有与数据绑定李剑道模板。

当我使用的jsfiddle它的工作原理:http://jsfiddle.net/kuba_vaclavik/kEqYh/212/

但在我的项目则返回错误“未捕获的类型错误:未定义没有属性”。 可能是绑定viewModel与无序列表或嵌套可观察对象的问题,但我无法修复它。 请有人帮忙吗? 我的方法可能是错误的,所以我欢迎不同的方法。

已解决。 无序列表错过了data-role =“listview”。 可能在SPA中有必要

<ul data-role="listview" data-bind="source: cilActions " data-template="ul-template" id="radioBtnGroup"></ul>