模板中的剑道 mvvm 绑定

Question

我正在尝试在模板中进行剑道 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/

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

Answer 1

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

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

在 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>