無法使用Knockout.js模板呈現格式良好的html表格

Question

我對第一次使用Knockout.js，輝煌的圖書館感到非常滿意，但我仍然試圖圍繞它的模板功能，例如這個簡單的聯繫人應用程序，在這裏我想產生一個錶行的每一個新的聯繫人：

<h3>Contact</h3> 

<p>First Name: <input data-bind="value: contactFirstName" /></p> 
<p>Last Name: <input data-bind="value: contactLastName" /></p> 
<p>Email Address: <input data-bind="value: contactEmailAddress" /></p> 

<button data-bind="click: addContact">Add</button> 

<table> 
<thead> 
    <tr> 
    <td>First Name</td> 
    <td>Last Name</td> 
    <td>Email Address</td> 
    </tr> 
    </thead> 
    <tbody data-bind="template: {name: 'contactsTemplate', foreach: contacts}" /> 
</table> 

<script id="contactsTemplate" type="text/html"> 
    <tr> 
    <td>${ $data.firstName }</td> 
    <td>${ $data.lastName }</td> 
    <td>${ $data.emailAddress }</td> 
    </tr> 
</script> 

<script type="text/javascript"> 

    function contact(firstName, lastName, emailAddress) { 
     return { 
      firstName: ko.observable(firstName), 
      lastName : ko.observable(lastName), 
      emailAddress: ko.observable(emailAddress) 
     }; 
    } 

    var viewModel = { 
     contactFirstName: ko.observable("Peter"), 
     contactLastName: ko.observable("Gibbons"), 
     contactEmailAddress: ko.observable("peter.gibbons@initech.com"), 
     equipments: ko.observableArray([new equipment("Peter", "Gibbons", "peter.gibbons@initech.com")]), 
     addEquipment: function() { 
      this.equipments.push(new equipment("Peter", "Gibbons", "peter.gibbons@initech.com")); 
     } 
    }; 

    ko.applyBindings(viewModel); 

</script> 

的綁定工作不錯，但我感到沮喪，因爲它似乎是嵌套內第一<td>的全新<tr> 。它發生在Iexplore和Firefox上。

任何建議將衷心感謝，多謝提前爲您的指導。

編輯

更新標記，以反映RP尼邁耶貢獻。

Answer 1

您可以替換該行：

<tr data-bind="template: {name: 'contactsTemplate', foreach: contacts}" /> 

有：

<tbody data-bind="template: {name: 'contactsTemplate', foreach: contacts}"></tbody>