淘汰赛 js - 显示选定的嵌套复选框答案

【问题标题】：knockout js - Display selected nested checkboxes淘汰赛 js - 显示选定的嵌套复选框
【发布时间】：2016-08-16 01:41:11
【问题描述】：

我有一些代码列出了一些带有复选框的类别和子类别，但我无法让它显示在嵌套 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>

【问题讨论】：

标签： arrays json list knockout.js nested

【解决方案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>

注意：您的 sn-p 中有一些无效的 HTML：您不能将 <span> 元素放入 <input> 元素中。

【讨论】：

很高兴我能帮上忙。