knockout: foreach mit Tabellenspalten fügt extra hinzu TR

Question

A jsfiddle erklärt das Problem. Ich möchte knockout:foreach verwenden, um eine Liste von Spaltenüberschriften (<th> Tags) für eine Tabelle zu generieren. Aber wenn Sie das DOM untersuchen, können Sie sehen, dass um jede <th> eine <tr> eingefügt wird, die bewirkt, dass die Spaltenüberschriften alle über der ganz linken Spalte liegen, anstatt eine Spaltenüberschrift über der entsprechenden Tabellenzelle anzuzeigen.

Ich dachte, vielleicht wäre die containerless syntax mein Freund, aber hier versuche ich es in another jsfiddle und es funktioniert nicht; Wenn Sie die JavaScript-Konsole öffnen, sehen Sie, dass der Kommentar, der die foreach-Schleife schließt, nicht gefunden werden kann (es gibt andere SO-Fragen zu diesem speziellen Problem, aber ihre Lösungen funktionierten nicht für mich).

Answer 1

Sie müssen Ihre TH-Elemente in einem einzigen TR verpacken, anstatt den Browser raten zu lassen, wo sie platziert werden sollen.

<thead> 
    <tr data-bind="foreach:columns"> 
    <th data-bind="text: $data.field_name"></th> 
    </tr> 
</thead>