劍道格，基因敲除VM和行模板

一個KendoUI電網由於具體要求（在某些列圖標，鏈接等），我需要定義rowTemplate，我定義爲KO模板。

但我想也有不同的顏色的正常和交替行。

因此我定義兩個相同的模板如下

 <script id="rowTmpl" type="text/html"> 
      <tr role="row" >   
       <td align="center"> 
        <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" > 
         <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" /> 
        </a> 
       </td> 
       <td data-bind="text: CheckNumber"></td> 
       .... 
      </tr> 
     </script> 
     <script id="altTmpl" type="text/html"> 
      <tr class="k-alt" role="row"> 
       <td align="center"> 
        <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" > 
         <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" /> 
        </a> 
       </td> 
       <td data-bind="text: CheckNumber"></td> 
       .... 
      </tr> 
     </script>

基本上兩個模板是相同的，除了中高音模板具有類=「K-ALT」施加到錶行。

但是這種方法非常糟糕，因爲它重複了行模板的整個標記。

什麼是更好的方法來完成我所需要的？

謝謝

來源

2013-12-08 bzamfir

如果只想要改變替代行的風格，你可以看到樣品的位置：http://jsfiddle.net/P5EQt/

HTML

<div data-bind="kendoGrid: { data: items, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div> 
<button data-bind="click: addItem">Add Item</button> 
<script id="rowTmpl" type="text/html"> 
    <tr data-bind="css:{strong:id%2===0}"> 
     <td data-bind="text: id"></td> 
     <td> 
      <input data-bind="value: name" /> 
     </td> 
     <td> 
      <a href="#" data-bind="click: $root.removeItem">x</a> 
     </td> 
    </tr> 
</script>

的Javascript

var ViewModel = function() { 
    this.items = ko.observableArray([ 
     { id: "1", name: ko.observable("apple")}, 
     { id: "2", name: ko.observable("orange")}, 
     { id: "3", name: ko.observable("banana")} 
    ]); 

    this.addItem = function() { 
     var num = this.items().length + 1; 
     this.items.push({ id: num, name: "new" + num}); 
    }; 

    this.removeItem = function(item) { 
     this.items.remove(item); 
    }.bind(this); 
    }; 
ko.applyBindings(new ViewModel());

CSS

.strong { background-color:red; }

使用淘汰賽CSS與ID的狀態（我的樣品中）結合，區分替代行

來源

2013-12-09 03:44:46 Goddard

謝謝。但是，這不適用於我的情況，因爲我的身份證不是順序的。我得到了另一個答案，指出我正確的方向 - 使用jQuery（$ element）.closest（'tr'）。index（）。另一個問題是在http://stackoverflow.com/questions/20457426/kendo-grid-ko-binding-and-access-to-row-index – bzamfir

我可以通過使用「的JQuery甚至」選擇來實現這一目標。我將代碼添加到了我的網格定義的databound屬性中。這裏有點像它。

JAVASCRIPT

var myGridDefinition = { 
     columns: {...} 
     dataBound: { 
      $("#myGridId .k-grid-content tr:even").addClass("k-alt");   
     }  
    }

HTML

<div id="myGridId" data-bind="kendoGrid: myGridDefinition"></div>

來源

2014-01-07 19:54:13 wavedrop

人們也可以創建在VM的AltRow屬性和IsAltRow（）方法和使用的CSS數據綁定特徵。

var vm = function() { 
    var self = this;  
    this.AltRow = true; 
    this.IsAltRow = function() { 
     self.AltRow = !self.AltRow; 
     return self.AltRow; 
    } 
} 

<script id="rowTmpl" type="text/html">      
    <tr data-bind="css: { 'k-alt': $root.IsAltRow() === true }"> 
     <td> 
       ... 
     </td>       
    </tr> 
</script>

我也嘗試使用KO的計算屬性功能，但它拋出錯誤，不知道爲什麼。但是這個解決方案很好。

來源

2014-02-17 15:14:11 Zoran

劍道格，基因敲除VM和行模板

回答

相關問題