knockout js - Anzeige ausgewählter verschachtelter Ankreuzfelder

Question

Ich habe Code, der einige Kategorien und Unterkategorien mit Ankreuzfeldern auflistet, aber ich kann nicht sehen, welche Ankreuzfelder in einer verschachtelten Zeile eingecheckt wurden. Es gibt die ausgewählten Elemente, aber nicht in einer ul-Liste zurück.

bitte können Sie mir zeigen, wie die ausgewählten Kategorien und Unterkategorien in einer verschachtelten ul angezeigt werden. Vielen Dank.

Answer 1

Ich würde vorschlagen zu speichern, ob eine Kategorie ausgewählt ist, und seine ausgewählten Elemente, in den Kategorien eigenes Modell. Sie können einen computed in Ihrem ViewModel erstellen, um ein Array mit nur ausgewählten Kategorien zu erstellen. Hier ein Beispiel:

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>

Hinweis: Sie haben einige ungültige HTML in Ihrem Snippet: Sie können kein <span> Element in einem <input> Element setzen.