Kendo Ui MVVM con diverso motore di modelli

Question

Ho letto in più luoghi che è possibile utilizzare il sistema MVVM di Kendo UI con un motore di modelli diversi.

Amo Kendo, adoro i widget, e adoro i semplici modelli di vista - ma odio i loro modelli.Sono molto restrittivi.

Ma quello che sto avendo problemi a trovare un modo per farlo;Mi piacerebbe usare Angularjs per i modelli ... ma non lo voglio per niente oltre a questo.Non mi interessa chiamare in modo dichiarato tutti i miei widget da Angular, ho solo bisogno di essere in grado di modificare i widget per il database ai modelli di vista Kendo e utilizzare le sezioni angolari per il rendering del ripetitore e tali.

è possibile?Ho visto il progetto Angularjs-Kendo e non sembra fare quello che sto provando.È solo per il legame del widget dichiarativo.

Answer 1

Non sono completamente sicuro di cosa hai in mente, ma qui ci sono i miei pensieri su questo. Non penso che ci sia un modo per separare l'uso dei modelli dell'Angular dall'utilizzo del loro concetto di controller e modelli.

Allora, probabilmente dovrai trovare un modo per integrare i tuoi modelli di vista con quelli.Non so se questo ti aiuta, ma ho schiaffeggiato insieme un semplice (e possibilmente goffo) esempio di combinare un modello di vista Kendo con modelli angolari e usando lo stesso modello di visualizzazione con un elenco a discesa 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());
    }
});

.

Corrispondente Jsbin: http://jsbin.com/ubupuwoq/5/edit

.

Angular-Kendo fondamentalmente semplifica alcune cose in modo da non dover creare imperativamente i widget.Invece, puoi crearli in un modo che si integra con controllori angolari e modelli:

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

.