靜態行knockout.js觀察的陣列表

我有一個HTML表和行來形成可觀察到的陣列....靜態行knockout.js觀察的陣列表

<tbody data-bind="foreach: TableArray"> 
    <tr> 
     <td data-bind:"text: Item1"></td>

等....

如何可以跳過第一行...所以我可以添加一個靜態行（不是頭）到表的頂部。

<tbody data-bind="foreach: TableArray"> 
    <tr> 
     <td> Static Row </td> 
    </tr> 
    <tr> 
     <td data-bind:"text: Item1"></td>

來源

2014-01-29 user3147424

祕密在無容器的foreach標記中。檢查「注4」下面的鏈接：

http://knockoutjs.com/documentation/foreach-binding.html

這裏是展示一個基本的例子小提琴。

http://jsfiddle.net/internetH3ro/M9f4D/7/

基本視圖模型：

function ViewModel() { 
    var self = this; 
    self.items = [{ 
     firstName: 'James', 
     lastName: 'McConnell' 
    },{ 
     firstName: 'Scott', 
     lastName: 'Hanselman' 
    },{ 
     firstName: 'Bill', 
     lastName: 'Gates' 
    }]; 
}

HTML標記：

<table> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    <!-- ko foreach: items --> 
    <tr> 
     <td><span data-bind="text: $data.firstName"></span></td> 
     <td><span data-bind="text: $data.lastName"></span></td> 
    </tr> 
    <!-- /ko --> 
</table>

所以，你只是包裝你想重複註釋的內容，和淘汰賽將重複該內容集合中的每個元素。相當漂亮，我希望Angular有這樣的東西。

來源

2014-01-29 19:00:34

同意關於角;也許AngularJS沒有無容器綁定語法，但它確實提供了一種簡潔的語法，它提供了與Knockout的無容器'foreach'相同的功能。 http://stackoverflow.com/a/21446102/538962 – mg1075

這是正確的答案 - 遺憾的是，「user314 ...」不能打擾你的答案。 –

呃，不要太擔心。我來這裏尋求幫助，儘可能地放棄，這纔是我真正關心的。 :)感謝您的認可，但非常感謝！ –

您可以使用if binding僅在「第一次」通過時輸出額外的行。

Example:

<table data-bind ="foreach: rows"> 

    <tr data-bind="if: $index() == 0" > 
    <td><span data-bind="text: $index"></span></td> 
    </tr> 
    <tr> 
    <td><span data-bind="text: text"></span></td> 
    </tr> 
</table>

來源

2014-01-29 19:01:52 Origineil

一個處理這一問題的方式是使用淘汰賽的無容器綁定語法。請參閱註釋4中有關foreach綁定的Knockout文檔。
http://knockoutjs.com/documentation/foreach-binding.html

的Javascript

var YourVM = function() { 
    this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]); 
}; 

ko.applyBindings(new YourVM());

HTML

 <table> 
     <thead> 
     <tr> 
      <th>Your Column</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="row-static"> 
      <td>Static Row</td> 
     </tr> <!-- ko foreach: allItems --> 
     <tr> 
      <td data-bind="text: $data"></td> 
     </tr> <!-- /ko -->  
     </tbody> 
    </table>

活生生的例子在JS斌
http://jsbin.com/AzEwEce/1/edit

來源

2014-01-29 19:02:10 mg1075

偉大的思想家都認爲。 ;） –

@JamesMcConnell - 在這方面絕對同意你關於Angular的意見。 https://github.com/angular/angular.js/issues/1891 – mg1075

靜態行knockout.js觀察的陣列表

回答

相關問題