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可以将其正确绑定到您的View模型。

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>

kendo mvvm绑定在模板中

1 个答案: