Не удается визуализировать хорошо сформированные таблицы html с помощью нокаута.шаблоны js


Я в полном восторге от своего первого опыта работы с 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.

Любой совет будет искренне признателен, заранее большое спасибо за ваше руководство.

EDIT

Обновлена разметка для отражения вкладаRP Niemeyer .

1 3

1 ответ:

Вы можете заменить эту строку:

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

С:

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