Impossible de rendre des tables html bien formées à l'aide de modèles Knockout.js

Question

Je suis vraiment ravi de mes premières expériences avec Knockout.js, une bibliothèque géniale, mais j'essaie toujours de comprendre ce qui se passe autour de ses fonctionnalités, par exemple simple application de contacts, où je voudrais créer une ligne de tableau pour chaque nouveau contact:

<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> 

les liaisons fonctionnent bien mais je suis en train frustré car il semble se nicher toute nouvelle <tr> dans la première <td> . Cela arrive avec Iexplore et Firefox.

Tout conseil sera sincèrement apprécié, merci beaucoup à l'avance pour vos conseils.

EDIT

balisage Mise à jour pour refléter RP Niemeyer contribution.

Answer 1

Vous pouvez remplacer cette ligne:

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

avec:

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