具有不同模板引擎的 Kendo UI MVVM答案

【问题标题】：Kendo UI MVVM with different templating engine具有不同模板引擎的 Kendo UI MVVM
【发布时间】：2013-11-15 21:06:25
【问题描述】：

我在多个地方了解到可以将 Kendo UI 的 MVVM 系统与不同的模板引擎一起使用。

我喜欢 Kendo，我喜欢小部件，我喜欢简单的视图模型 - 但我讨厌他们的模板。它们非常严格。

但我遇到的麻烦是找到任何方法来做到这一点；我很想将 AngularJS 用于模板……但除此之外我不想要它。我对从 Angular 以声明方式调用我的所有小部件不感兴趣，我只需要能够将小部件数据绑定到 kendo 视图模型，并使用 Angular 来呈现中继器部分等。

这可能吗？我已经看过 AngularJS-Kendo 项目，但它似乎没有做我正在尝试的事情。它仅用于声明性小部件绑定。

【问题讨论】：

我在使用 Kendo 的模板时遇到了麻烦。我觉得很奇怪他们如何用 性能证明准系统模板的合理性！它的速度要快得多！ 当性能似乎不是他们制作的任何小部件和 ViewModel 的首要任务时。通常，简单和易用性是剑道的首要考虑因素。

标签： angularjs kendo-ui

【解决方案1】：

我不完全确定您的想法，但这是我对此的看法。我认为没有办法将 Angular 模板的使用与使用它们的控制器和模型概念分开。

因此，您可能必须找到一种方法将您的视图模型与这些视图模型集成。我不知道这是否对您有帮助，但我已经将 Kendo 视图模型与 Angular 模板相结合以及将相同的视图模型与 Kendo 下拉列表结合使用的简单（并且可能是笨拙的）示例：

HTML

  <div ng-controller="MainCtrl">
      <clickable items="items"></clickable>
      <ul>
          <li ng-repeat="item in items.slice(0,items.length)">
              {{ item.text }} ({{ item.value }})
          </li>
      </ul>
  </div>

JavaScript

app = angular.module('app', []);

var items = [
             { text: "test 0", value: 0},
             { text: "test 1", value: 1}
            ];

var viewModel = kendo.observable({
    items: items
});

viewModel.bind("change", function(e) {
  console.log("change");
});

app.controller('MainCtrl', function($scope) {
  $scope.items = viewModel.get("items");
});

app.directive('clickable', function() {  
  return {
      restrict: "E",
      scope: {
          items: '='
      },
      template: "<button>Click to Add</button>",
      link: function(scope, element, attrs) {
          element.bind('click', function() {
              var index = scope.items.length;
              var text =  "test " + index;
              scope.items.push({ text: text, value: index});

              scope.$apply();
          });
      }
  };
});

$("#tree").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: viewModel.get("items"),
    change: function (e) {
        console.log("dropdown value change: " + this.value());
    }
});

对应的JSBin：http://jsbin.com/UBuPUwOq/5/edit

Angular-Kendo 基本上简化了一些事情，因此您不必强制创建小部件。相反，您可以通过与 Angular 控制器和模型集成的方式创建它们：

<select kendo-drop-down-list
        k-option-label="'Select A Thing'"
        k-data-text-field="'name'"
        k-data-value-field="'id'"
        k-data-source="things"></select>

【讨论】：