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