KENDO UI MVVM с разным шаблонным двигателем

Question

Я прочитал в нескольких местах, которые можно использовать систему MVVM Kendo UI с другим механизмом шаблонов.

Я люблю кендо, я люблю виджеты, и я люблю простые виды видов - но я ненавижу своих шаблонов.Они очень ограничиты.

Но то, что у меня возникнут проблемы, это найди способ сделать это;Я хотел бы использовать Angularjs для шаблонов ... Но я не хочу ничего за что-то за это.Я не заинтересован в декларативно называть все мои виджеты из угловаговца, мне просто нужно иметь возможность иметь возможность DATA DATA DBLESS HEATDS к моделям View Kendo и использовать угловые для рендеринга разделов повторителя и такого.

Это возможно?Я видел проект Angularjs-Kendo, и это, похоже, не делаю то, что я пытаюсь.Это только для декларативного привязки виджета.

Answer 1

Я не совсем уверен, что вы имеете в виду, но вот мои мысли об этом. Я не думаю, что есть способ отделить использование шаблонов углов из употребления их концепции контроллеров и моделей.

Так, вы, вероятно, должны найти способ интеграции своих моделей просмотра с теми.Я не знаю, поможет ли это вам, но я ударил простой (и, возможно, неуклюжий) пример объединения модели просмотра Kendo с угловыми шаблонами, а также используя ту же модель просмотра с раскрывающимся списком 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/upuwoq/5/edit P >.

Angular-kendo в основном упрощает некоторые вещи, чтобы вам не приходилось неимскавать виджеты.Вместо этого вы можете создать их таким образом, что интегрируется с угловыми контроллерами и моделями:

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

.