knockout 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

Я предлагаю сохранить, выбрана ли категория, и ее выбранные элементы, в категориях собственной модели. Вы можете сделать computed в своем ViewModel, чтобы создать массив с выбранными категориями. Вот пример:

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 в вашем фрагменте кода, вы не можете поставить <span> элемент в <input> элемента.