我在多个地方读到,可以使用Kendo UI的MVVM系统与不同的模板引擎。
我喜欢剑道,我喜欢小部件,我喜欢简单的视图模型 - 但我讨厌它们的模板。它们非常严格。
但是我遇到的麻烦是找到任何方法来做到这一点;我很想将AngularJS用于模板...但我不想要除此之外的任何事情。我对从 Angular 以声明方式调用我的所有小部件不感兴趣,我只需要能够将数据绑定小部件到 kendo 视图模型,并使用 Angular 渲染中继器部分等。
这可能吗?我看过AngularJS-Kendo项目,它似乎没有做我正在尝试的事情。它仅用于声明性小部件绑定。
完全确定你的想法,但这是我对此的看法。我认为没有办法将 Angular 模板的使用与使用他们的控制器和模型概念分开。
因此,您可能需要找到一种方法来将您的视图模型与这些模型集成。我不知道这是否对您有帮助,但是我已经将一个简单的(可能很笨拙的)示例组合在一起,将剑道视图模型与 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>