Не удается визуализировать хорошо сформированные таблицы 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 .