テンプレートエンジンが異なる剣道UI MVVM

StackOverflow https://stackoverflow.com//questions/20010600

  •  20-12-2019
  •  | 
  •  

質問

私は異なるテンプレートエンジンでKendo UIのMVVMシステムを使用することが可能であることが可能な複数の場所で読みました。

私は剣道が大好きです、私はウィジェットが大好きです、そして私は単純なビューモデルが大好きです - しかし私は彼らのテンプレートが嫌いです。それらは非常に制限的です。

しかし、私が問題を抱えていることはこれをする方法を見つけることです。私はテンプレートのためにAngularyjsを使うのが大好きです...しかし、私はそれを超えて何かのためにそれを望んでいません。私のウィジェットのすべてを角度から宣言的に呼び出すことには興味がありません。

これは可能ですか？私はAngularjs-Kendoプロジェクトを見ました、そしてそれは私が試みていることをすることはしていません。宣言型ウィジェットバインディング用です。

役に立ちましたか？

解決

あなたが何を念頭に置いているのか完全に確信していませんが、ここで私の考えは私の考えです。 Angularのテンプレートの使用をコントローラやモデルの概念を使用することから分離する方法があるとは思いません。

だから、あなたはおそらくあなたのビューモデルをそれらと統合する方法を見つける必要があります。これがあなたを助けるかどうかわかりませんが、Kendoのテンプレートと同じビューモデルを使って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/ubupuwoq/5/edit

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>
.
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top