具有不同模板引擎的Kendo UI MVVM

我在多個地方閱讀過，可以使用Kendo UI的MVVM系統和不同的模板引擎。具有不同模板引擎的Kendo UI MVVM

我喜歡劍道，我喜歡小部件，我喜歡簡單的視圖模型 - 但我討厭他們的模板。他們是非常嚴格的。

但是我有麻煩的是找到任何方法來做到這一點;我很樂意使用AngularJS作爲模板...但是除了這些之外，我不想要它。我對聲明性地調用Angular的所有小部件不感興趣，我只需要能夠將小部件綁定到kendo視圖模型，並使用Angular呈現中繼器部分等。

這可能嗎？我已經看到了AngularJS-Kendo項目，它似乎沒有做我正在嘗試的。它只是用於聲明性的小部件綁定。

來源

2013-11-15 Ciel

我對Kendo的模板一無所知。我覺得很奇怪，他們如何證明裸片模板具有*性能！它速度非常快！*當性能似乎不是他們製作的任何小部件和ViewModel的優先級時。通常簡單和易用性首先與劍道。 –

我不完全確定你的想法，但這裏是我的想法。我不認爲有一種方法可以使用他們的控制器和模型的概念來分開使用Angular的模板。

因此，您可能必須找到一種方法來將視圖模型與這些模型進行集成。我不知道這是否對你有幫助，但我已經將一個Kendo視圖模型與Angular模板相結合以及將相同視圖模型與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>

來源

2013-11-24 12:02:33

這實際上很有幫助，謝謝！ – Ciel

具有不同模板引擎的Kendo UI MVVM

回答

相關問題