Tree view with check all or uncheck all in knockout.js

Question

Я использовал следующий код, чтобы сделать дерево в knockout.js с многоуровневыми данными.

<ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul> 

<script id="itemTmpl" type="text/html"> 
    <li> 
     <span data-bind="text: name"></span> 
     <input type='checkbox'> 
     <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"> 

     </ul> 
    </li> 
</script> 

, но теперь я хочу, чтобы расширить это в нокауте таким образом, что если я проверил родителя, то все его дети получили выбраны и, если снимите флажок родительские дети получают бесконтрольно.

Here is js fiddle link

http://jsfiddle.net/tEGUp/

Answer 1

Я сделал версию, не изменяет Orginal данных, но использует отображение КО.

Я также взял opertunity, чтобы показать, насколько меньше кода вы должны написать с моей библиотекой Конвенции

MyApp.TreeViewModel = function(data) { 
    var mapping = { 
     items: { 
      create: function(options) { 
       return new MyApp.TreeViewModel(options.data); 
      } 
     } 
    }; 
    this.checked = ko.observable(false); 
    this.checked.subscribe(this.onChecked, this); 

    this.items = ko.observableArray(); 

    ko.mapping.fromJS(data, mapping, this);  
}; 

MyApp.TreeViewModel.prototype = { 
    constructor: MyApp.TreeViewModel, 
    onChecked: function(checked) { 
     ko.utils.arrayForEach(this.items(), function(item) { 
      item.checked(checked); 
     }); 
    } 
}; 

• С моей Lib http://jsfiddle.net/u28CY/
• Без http://jsfiddle.net/u28CY/1/