模板中的 kendo mvvm 绑定答案

【问题标题】：kendo mvvm binding within a template模板中的 kendo mvvm 绑定
【发布时间】：2017-09-26 23:07:26
【问题描述】：

我正在尝试在模板中绑定 kendo mvvm。模板变量正在工作，但没有任何 MVVM 的东西。

<div id="list"></div>

<script id="template" type="text/x-kendo-template">
    <div>
    <button data-bind="visible:  alreadyAttending, click: onClick">
        Your id is ${ID} 
    </button>
  </div>
</script>

var data = [];
data[0] = { alreadyAttending:  true, ID:  1, onClick:  function() { alert("Click 1"); }};
data[1] = { alreadyAttending:  false, ID:  2, onClick:  function() { alert("Click 2"); }};

 $("#list").kendoListView({
   dataSource: data,
   template: kendo.template($("#template").html())
 });

这里有小提琴：https://jsfiddle.net/q99ufo3c/5/

您可以看到按钮已替换为数据数组中的值，但可见性和点击事件并未关联。我不确定我错过了什么。有谁知道这是否支持？

【问题讨论】：

您将 mvvm 与 jquery 语法混合在一起。您需要一个模型（可观察剑道）并将容器 div 绑定到该模型。您还需要在列表 div 中指定模板

标签： mvvm kendo-ui

【解决方案1】：

您需要为div 元素定义一些数据属性，以便Kendo 可以将其正确绑定到您的视图模型。

data-role="listview" - 定义一个listview 组件；
data-template="yourtemplateid" - 定义要使用的模板；
data-bind="source: dataSource" - 定义什么是数据
listview 组件的来源；

在 Javascript 中，您需要有一个模型来表示您的对象，该对象将位于列表视图的数据源中。我创建了一个名为 vm 的方法，我选择使用 ObservableObject 扩展方法，因为它在您想要创建具有默认值的对象时很有用，例如 onClick 方法。

请看下面的片段。

(function() {
  var vm = kendo.data.ObservableObject.extend({
    init: function(values) {
      var defaultValues = {
        alreadyAttending: false,
        ID: null
      };
      kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values));
    },
    onClick: function() {
      alert(this.get("ID"));
    }
  });

  var source = [
    new vm({
      alreadyAttending: true,
      ID: 1
    }),
    new vm({
      alreadyAttending: false,
      ID: 2
    })
  ];

  var mainViewModel = kendo.observable({
    dataSource: source
  });

  kendo.bind($("#list"), mainViewModel);
})();

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="list" data-role="listview" data-template="template" data-bind="source: dataSource"></div>
  <script id="template" type="text/x-kendo-template">
    <div>
      <button data-bind="visible: alreadyAttending, click: onClick">
        	Your id is #:ID#
      	</button>
    </div>
  </script>
</body>

</html>

【讨论】：