Kendo UI MVVM avec un moteur de modèles différent

Question

J'ai lu dans plusieurs endroits qu'il est possible d'utiliser le système MVVM de Kendo UI avec un moteur de modèles différent.

J'aime Kendo, j'aime les widgets et j'aime les modèles de vue simples - mais je déteste leurs modèles.Ils sont très restrictifs.

Mais ce que j'ai des problèmes, c'est de trouver un moyen de le faire;J'aimerais utiliser angularjs pour des modèles ... mais je ne le veux pas pour quoi que ce soit au-delà de cela.Je ne m'intéresse pas de manière déclarative tous mes widgets de Angular, j'ai juste besoin de pouvoir être en mesure de widgets de données sur les modèles Kendo View et d'utiliser des sections de répéteur angulaires pour rendre les répéteurs etc.

est-ce possible?J'ai vu le projet Angularjs-Kendo et il ne semble pas faire ce que j'essaie.Il s'agit juste pour une liaison de widget déclaratif.

Answer 1

Je ne suis pas complètement sûr de ce que vous avez à l'esprit, mais voici mes pensées à ce sujet. Je ne pense pas qu'il existe un moyen de séparer l'utilisation de modèles d'angulaire d'utiliser leur concept de contrôleurs et de modèles.

Donc, vous devrez probablement trouver un moyen d'intégrer vos modèles de vue avec ceux-ci.Je ne sais pas si cela vous aide, mais j'ai giflé un exemple simple (et éventuellement maladroit) de combinaison d'un modèle de vue Kendo avec des modèles angulaires, ainsi que d'utiliser le même modèle de vue avec une liste déroulante 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 correspondant: http://jsbin.com/edupuwoq/5/edit

Angulaire-Kendo simplifie essentiellement certaines choses afin que vous n'ayez pas à créer impérativement les widgets.Au lieu de cela, vous pouvez les créer d'une manière qui intègre des contrôleurs angulaires et des modèles:

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