Question

我有一个复选框行的模板 - 我在渲染模板时设置了一个值，但MVVM检查的绑定会抛出异常。我很困惑为什么这不起作用，因为生成的代码几乎是剑道本身给出的一个例子（http://demos.telerik.com/kendo-ui/mvvm/elements）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
  <script id="fTemplate" type="text/html">
    <div>
        <input type="checkbox" value="#=data#" data-bind="checked: selectedF"/>
        <div style="display: inline-block; margin-left: 5px;">#=data#</div>
    </div>
   </script>

   <script>
     var viewModel = window.kendo.observable({
       fSource: ["1","2","3"],
       selectedF: [],
       selectedFText: function(){
            return viewModel.get('selectedF').join(',');
       }

     });

     $(document).ready(function() {
       window.kendo.bind($('body'), viewModel);
     });


  </script>
</head>
<body>
  <ul data-bind="source: fSource" data-template="fTemplate"></ul>
  <br/>
  Selected: <div data-bind="text: selectedFText"></div>
</body>
</html>

此处的实例：http://dojo.telerik.com/EMIp

Answer 1

问题是因为您尝试访问模板无法识别的viewModel属性。

这是一个有效的例子。我很确定它会给你足够的帮助。

<script id="fTemplate" type="text/html">
    <div>
        <input type="checkbox" value="#=data.value#" data-bind="checked: isSelected"/>
        <div style="display: inline-block; margin-left: 5px;">#=data.value#</div>
    </div>
</script>

<script>
     var viewModel = window.kendo.observable({
       fSource: [
         {
            value:"1",
            isSelected: false
         },
         {
            value:"2",
            isSelected: false
         },
         {
            value:"3",
            isSelected: false
         }],
       selectedF: [],
       selectedFText: function(){
       }
    });

    $(document).ready(function() {
       window.kendo.bind($('body'), viewModel);
    });
</script>

HTML：

 <body>
  <ul data-bind="source: fSource" data-template="fTemplate"></ul>
  <br/>
  Selected: <div data-bind="text: fSource[0].isSelected"></div>
</body>

你的小提琴：

http://dojo.telerik.com/EMIp/5

Kendo UI - 模板化复选框和绑定检查到viewModel

1 个答案: