Angularjs 具有不同模板引擎的剑道UI MVVM

我在多个地方读到过，可以将剑道UI的MVVM系统与不同的模板引擎一起使用

我喜欢剑道，我喜欢小部件，我喜欢简单的视图模型——但我讨厌它们的模板。它们是非常严格的

但我遇到的困难是找到任何方法来做到这一点；我想使用AngularJS作为模板。。。但除此之外，我什么都不想要。我对从Angular声明性地调用我的所有小部件不感兴趣，我只需要能够将小部件数据绑定到kendo视图模型，并使用Angular渲染转发器部分等等

---

这可能吗？我看过AngularJS剑道项目，但它似乎没有达到我所尝试的效果。它只是用于声明性小部件绑定。

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

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

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>

{{item.text}}（{{item.value}}）

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());
    }
});

app=angular.module（'app'，[]）；
可变项目=[
{文本：“测试0”，值：0}，
{文本：“测试1”，值：1}
];
var viewModel=kendo.observable({
项目：项目
});
viewModel.bind（“更改”，函数（e）{
控制台日志（“更改”）；
});
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.items=viewModel.get（“items”）；
});
app.directive（'clickable'，function（）{
返回{
限制：“E”，
范围：{
项目：'='
},
模板：“点击添加”，
链接：函数（范围、元素、属性）{
元素绑定（'单击'，函数（）{
var指数=scope.items.length；
var text=“test”+索引；
push（{text:text，value:index}）；
作用域：$apply（）；
});
}
};
});
$（“#树”）.kendoDropDownList({
dataTextField:“文本”，
dataValueField:“值”，
数据源：viewModel.get（“items”），
更改：功能（e）{
log（“下拉值更改：+this.value（））；
}
});

对应的JSBin：

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

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

---

除了剑道的模板，我什么都没有遇到。我觉得很奇怪，他们如何用性能来证明裸体模板的合理性！快多了！在他们制作的任何小部件和视图模型中，性能似乎都不是他们的首要任务。通常简单易用是剑道的第一步。