Statische Zeile über knockout.js beobachtbaren Array Tabelle

Question

ich eine HTML-Tabelle haben und die Reihen kommen eine beobachtbare Array bilden ....

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

etc ....

Wie kann ich die überspringen erste Reihe ... so kann ich eine statische Reihe (keine Überschrift) zum Anfang der Tabelle hinzufügen.

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

Answer 1

Das Geheimnis ist in der Containerless foreach Markup. Check "Anmerkung 4" von dem folgenden Link:

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

Hier ist eine Geige ein einfaches Beispiel zeigt.

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

Grundansicht Modell:

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

HTML-Markup:

<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> 

So wickeln Sie nur die Inhalte, die Sie in einem Kommentar wiederholt werden soll, und Knockout wird wiederholen, dass der Inhalt für jedes Element in Ihrer Sammlung. Ziemlich geschickt, ich wünschte, Angular hätte so etwas.

Answer 2

Sie könnten eine if binding verwenden, um nur eine zusätzliche Zeile im "ersten" Durchgang auszugeben.

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> 

Answer 3

Eine Möglichkeit, das Problem zu nähern, wäre Knockout der behälterlosen Bindungssyntax zu verwenden. Siehe Anmerkung 4 in Knockouts Dokumentation der foreach Bindung.
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> 

---

Live-Beispiel auf JS Bin
http://jsbin.com/AzEwEce/1/edit