无法使用 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>

绑定工作正常，但我感到很沮丧，因为它似乎将全新的 <tr> 嵌套在第一个 <td> 中。 Iexplore 和 Firefox 都会发生这种情况。

任何建议将不胜感激，在此先感谢您的指导。

编辑

更新了标记以反映 RP Niemeyer 的贡献。

Answer 1

你可以替换这一行：

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

与：

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