javascript - Nested foreach binding not displaying correctly -

i'm trying display observablearray within observablearray.

it's simple todo list tasks assigned people , want display each persons tasks in there own div.

i'm using knockoutjs 3.3.0

why aren't tasks showing under person?

here's html:

    <div>       <form data-bind="submit: addperson">         <p>new person: <input data-bind='value: persontoadd, valueupdate: "afterkeydown"' />           <button type="submit" data-bind="enable: persontoadd().length > 0">add</button>         </p>       </form>       <form data-bind="submit: addtask">         <p>new task: <input data-bind='value: tasktoadd, valueupdate: "afterkeydown"' />           <select data-bind="options: people, optionstext: 'name', value:selectedperson"></select>           <button type="submit" data-bind="enable: tasktoadd().length > 0">add</button>         </p>       <fieldset>       <legend>tasks</legend>         <div data-bind="foreach: people">           <div style="float: left; padding-right: 20px;">             <label data-bind="text: name" />             <div data-bind="foreach: tasks">               <input type="checkbox" data-bind="checked: done" />               <label data-bind="text: description, style: { textdecoration: done() ? 'line-through' : 'none' }" />             </div>           </div>         </div>       </fieldset>       </form>     </div> 

here's javascript:

    var todolist = function (people) {     var self = this;      self.tasktoadd = ko.observable("");     self.persontoadd = ko.observable("");     self.selectedperson = ko.observable("");     self.people = ko.observablearray(people);      self.addtask = function () {       if (self.tasktoadd() != "") {          var person = ko.utils.arrayfirst(self.people(), function (item) {           return item.name() === self.selectedperson().name();         });          person.addtask(new task(self.tasktoadd(), person.name()));          self.tasktoadd("");       }     };      self.addperson = function () {       if (self.persontoadd() != "") {         self.people.push(new person(self.persontoadd()));         self.persontoadd("");       }     }.bind(self);     };      var task = function (task, assignee) {       var self = this;        self.task = ko.observable(task);       self.assignee = ko.observable(assignee)       self.done = ko.observable(false);        self.description = ko.purecomputed(function () {       return self.task() + " (assigned to: " + self.assignee() + ")";       }, self);     };      var person = function (name, tasks) {       var self = this;        self.name = ko.observable(name);       self.tasks = ko.observablearray(tasks);        self.addtask = function (task) {       self.tasks.push(task);       }.bind(self);     };      ko.applybindings(new todolist()); 

the reason tasks not appearing because <label> tags not closed correctly. instead of <label data-bind="blah"/>, use <label data-bind="blah"></label>.

the tasks container not rendering @ all, , therefore not parsed knockout.

to more clear, label data-bind="text: name" not closed , has text binding. text binding replacing entire tasks container name of person. there 2 instances of error in sample.