ノックアウトjs - 選択されたネストされたチェックボックスを表示

Question

いくつかのカテゴリとサブカテゴリをチェックボックスで表示するコードがありますが、ネストされたulでどのチェックボックスがチェックされているかを表示することはできません。選択された項目は返されますが、ulリストには返されません。

選択したカテゴリとサブカテゴリをネストされたulに表示する方法を教えてください。ありがとう。

var ViewModel = function() { 

    var self = this; 
    self.selectedCategories = ko.observableArray(); 
    self.selectedItems = ko.observableArray(); 
    self.categories = ko.observableArray([ 
     { name: 'Hospitality', items: [ 'Bars', 'Caterers', 'Cafes', 'Food To Go', 'Pubs' ] }, 
     { name: 'Popup', items: [ 'Food Vans', 'Festivals', 'Markets', 'Beer Garden' ] } 
    ]); 

} 
var viewModel = new ViewModel(); 
ko.applyBindings(viewModel); 



<ul data-bind="foreach: { data: categories, as: 'category' }"> 
    <li> <input type="checkbox" name="level-1" data-bind="checked: $root.selectedCategories, attr: {value: name}"><span data-bind="text: category.name"></span></input> 
     <ul data-bind="foreach: { data: items, as: 'item' }"> 
      <li><input type="checkbox" name="level-2" data-bind="checked: $root.selectedItems, attr: {value: item}"><span data-bind="text: item"></span></input></li> 
     </ul> 
    </li> 
</ul> 

<div data-bind="text: selectedCategories"></div> 
<div data-bind="text: selectedItems"></div> 

Answer 1

私は、カテゴリが選択されているかどうか、およびその選択されたアイテムをカテゴリのモデルに保存することをお勧めします。 ViewModelのcomputedに、選択したカテゴリのみの配列を作成させることができます。ここでは例です：

var ViewModel = function() { 
 

 
    var self = this; 
 

 
    self.categories = ko.observableArray([{ 
 
    name: 'Hospitality', 
 
    items: ['Bars', 'Caterers', 'Cafes', 'Food To Go', 'Pubs'], 
 
    selected: ko.observable(false), 
 
    selectedItems: ko.observableArray([]) 
 
    }, { 
 
    name: 'Popup', 
 
    items: ['Food Vans', 'Festivals', 'Markets', 'Beer Garden'], 
 
    selected: ko.observable(false), 
 
    selectedItems: ko.observableArray([]) 
 
    }]); 
 

 
    self.selectedCategories = ko.computed(function() { 
 
    return self.categories().filter(function(cat) { 
 
     return cat.selected() 
 
    }); 
 
    }); 
 
} 
 
var viewModel = new ViewModel(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<ul data-bind="foreach: { data: categories, as: 'category' }"> 
 
    <li> 
 
    <input type="checkbox" name="level-1" 
 
      data-bind="checked: selected, value: name"> 
 
    <span data-bind="text: name"></span> 
 
    <ul data-bind="foreach: { data: items, as: 'item' }"> 
 
     <li> 
 
     <input type="checkbox" name="level-2" 
 
       data-bind="checked: category.selectedItems, value: item, enable: category.selected"> 
 
     <span data-bind="text: item, style: { 'opacity' : (category.selected() ? 1 : 0.5)}"></span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 

 
<h2>Selections</h2> 
 
<ul data-bind="foreach: selectedCategories"> 
 
    <li> 
 
    <div data-bind="text: name"></div> 
 
    <ul data-bind="foreach: selectedItems"> 
 
     <li data-bind="text: $data"></li> 
 
    </ul> 
 
    </li> 
 
</ul>

注：あなたのスニペットで、いくつかの無効なHTMLを持っていた：あなたは<input>要素で<span>要素を配置することはできません。