Kendo UI MVVM com mecanismo de modelagem diferente

Question

Li em vários lugares que é possível usar o sistema MVVM do Kendo UI com um mecanismo de modelagem diferente.

Adoro Kendo, adoro os widgets e adoro os View Models simples - mas odeio seus modelos.Eles são muito restritivos.

Mas o que estou tendo dificuldade é encontrar uma maneira de fazer isso;Eu adoraria usar AngularJS para modelos...mas não quero isso para nada além disso.Não estou interessado em chamar declarativamente todos os meus widgets do Angular, só preciso ser capaz de vincular os widgets aos modelos de visualização do kendo e usar o Angular para renderizar seções repetidoras e coisas assim.

Isso é possível?Eu vi o projeto AngularJS-Kendo e parece não fazer o que estou tentando.É apenas para vinculação declarativa de widget.

Answer 1

Não tenho certeza do que você tem em mente, mas aqui estão meus pensamentos sobre isso.Não acho que haja uma maneira de separar o uso dos modelos do Angular do uso de seu conceito de controladores e modelos.

Então, você provavelmente teria que encontrar uma maneira de integrar seus modelos de visualização com eles.Não sei se isso ajuda você, mas juntei um exemplo simples (e possivelmente desajeitado) de combinação de um modelo de visualização Kendo com modelos Angular, bem como de usar o mesmo modelo de visualização com uma lista suspensa 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 correspondente: http://jsbin.com/UBuPUwOq/5/edit

Angular-Kendo basicamente simplifica algumas coisas para que você não precise criar widgets imperativamente.Em vez disso, você pode criá-los de uma forma que se integre aos controladores e modelos 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>