Kendo UI和knockout.js rowTemplate排序

Question

我有一個MVC網站，我使用Kendo UI和knockout.js來顯示頁面。一種情況是通過$.getJSON從服務器獲取數據庫信息，然後在KendoUI網格上顯示此信息。

<div data-bind="kendoGrid:{sortable:true, data:users, rowTemplate:'userRowTemplate'}> 
    <table> 
     <thead> 
      <tr> 
       <th>Username</th> 
       <th>First Name</th> 
       <th>Last Name</th>     
      </tr> 
     </thead> </table> 
</div> 

<script type="text/html"> 
    <tr> 
     <td data-bind="text: Username"></td> 
     <td data-bind="text: FirstName"></td> 
     <td data-bind="text: LastName"></td>    
    <tr> 
</script> 

和JavaScript：

<script type="text/javascript"> 
    var ViewModel = function() { 
     var self=this; 
     self.users=ko.mapping.fromJS([]); 
     $getJSON("/UserManagementController/GetUsers",function(data){ 
      ko.mapping.fromJS(data,{},self.users); 
     });     
    }; 

    $(document).ready(function(){ 
     var newViewModel=new ViewModel(); 
     ko.applyBindings(newViewModel); 
    });  
</script> 

我想這個數據是在特定列排序（此處指定的有例如的緣故），但我一直沒能成功做到這一點。我嘗試了this knockout-kendo plugin issue post的解決方案，該解決方案在簡單對象上運行良好，但不適用於observables。所以我的問題是：如何通過MVC控制器將數據從數據庫映射到knockout中的observables並將它們顯示在Kendo網格中，但是仍然能夠對它們進行排序？

謝謝， 亞歷克斯·巴拉克

Answer 1

您可以通過創建一個JS視圖模型來表示即將從服務器返回的數據，並將數據映射到視圖模型做到這一點。然後，可以通過訂閱匹配的可觀察屬性來實現排序，從而獲得簡單對象。

下面是一個例子： http://jsfiddle.net/R4Jys/1/

HTML：

<div data-bind="kendoGrid: gridOptions(myList)"></div> 
<script id="rowTmpl" type="text/html"> 
    <tr> 
     <td> 
      <span data-bind="text: firstName" /> 
     </td> 
     <td> 
      <span data-bind="text: lastName" /> 
     </td> 
     <td> 
      <span data-bind="text: userName" /> 
     </td> 
    </tr> 
</script> 

的JavaScript：

var gridItem = function() { 
    var self = this; 
    self.firstName = ko.observable(); 
    self.firstNameSort; 
    self.firstName.subscribe(function (value) { 
     self.firstNameSort = value; 
    }); 
    self.lastName = ko.observable(); 
    self.lastNameSort; 
    self.lastName.subscribe(function (value) { 
     self.lastNameSort = value; 
    }); 
    self.userName = ko.observable(); 
    self.userNameSort; 
    self.userName.subscribe(function (value) { 
     self.userNameSort = value; 
    }); 
    self.other = ko.observable('test'); 
    return self; 
}; 
var vm = function() { 
    var self = this; 
    self.myList = ko.observableArray(); 
    self.test = ko.observable(); 
    self.gridOptions = function (data) { 
     return { 
      data: data, 
      rowTemplate: 'rowTmpl', 
      useKOTemplates: true, 
      scrollable: true, 
      sortable: true, 
      columns: [ 
       { 
        field: "firstNameSort", 
        title: "First Name", 
        width: 130 
       }, 
       { 
        field: "lastNameSort", 
        title: "Last Name", 
        filterable: true 
       }, 
       { 
        field: "userNameSort", 
        title: "Username" 
       } 
      ] 
     } 
    }; 
    var data = [{'firstName':'Steve', 'lastName':'Jones', 'userName': 'steve.jones'}, 
       {'firstName':'Janet', 'lastName':'Smith', 'userName': 'janet.smith'}, 
       {'firstName':'April', 'lastName':'Baker', 'userName': 'april.baker'}, 
       {'firstName':'Dave', 'lastName':'Lee', 'userName': 'dave.lee'}, 
       {'firstName':'Jack', 'lastName':'Bennet', 'userName': 'jack.bennet'}, 
       {'firstName':'Chris', 'lastName':'Carter', 'userName': 'chris.carter'}]; 
    self.myList(ko.utils.arrayMap(data, function(item) { 
     var g = new gridItem(); 
     ko.mapping.fromJS(item, {}, g); 
     return g; 
    })); 
}; 
var pageVm = new vm(); 

ko.applyBindings(pageVm); 

Answer 2

作爲替代，你可以修改kendo.web.js（版本2013.3.1119 ）在線6844 & 6844.

更換

compare: function(field) { 
     var selector = this.selector(field); 
     return function (a, b) { 
       a = selector(a); 
       b = selector(b); 

隨着

compare: function(field) { 
     var selector = this.selector(field); 
     return function (a, b) { 
       a = ko.utils.unwrapObservable(selector(a)); 
       b = ko.utils.unwrapObservable(selector(b)); 

通過使用基因敲除工具「ko.utils.unwrapObservable」你可以得到觀測到的使用價值時劍道比較列的值

Answer 3

DEFINE CUSTOM COMPARE FUNCTION將提供解決方案，您可以在其中重寫字段定義中的比較功能。

所以，你可以做這樣的事情：

$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    sortable: true, 
    columns: [{ 
     field: "item", 
     sortable: { 
      compare: function(a, b) { 
       var valueA = a["item"]; 
       var valueB = b["item"]; 

       if (typeof valueA === "function") valueA = valueA(); 
       if (typeof valueB === "function") valueB = valueB(); 

       if (this.isNumeric(valueA) && this.isNumeric(valueB)) 
       { 
        valueA = parseFloat(valueA); 
        valueB = parseFloat(valueB); 
       } 

       if (valueA && valueA.getTime && valueB && valueB.getTime) 
       { 
        valueA = valueA.getTime(); 
        valueB = valueB.getTime(); 
       } 

       if (valueA === valueB) 
       { 
        return a.__position - b.__position; 
       } 

       if (valueA == null) 
       { 
        return -1; 
       } 

       if (valueB == null) 
       { 
        return 1; 
       } 

       if (valueA.localeCompare) 
       { 
        return valueA.localeCompare(valueB); 
       } 

       return valueA > valueB ? 1 : -1; 
      } 
     } 
    }] 
}); 

private isNumeric(input) 
    { 
     return (input - 0) == input && ('' + input).trim().length > 0; 
    } 

的比較方法是從劍道腳本被盜，但變化是在財產的typeof功能（是什麼ko.observable），這解開了價值。另外，我添加了對數字的支持。