如何在不添加更多 html 的情况下单独切换淘汰赛 foreach div？

Posted 2023-03-27

【中文标题】如何在不添加更多 html 的情况下单独切换淘汰赛 foreach div？

【英文标题】：How do I toggle a knockout foreach div individually without adding more html?

【发布时间】：2020-05-24 16:33:05

【问题描述】：

我使用 foreach 方法在可观察数组中创建标记 foreach 项目以创建树视图。 输出示例

类别名称1 内容 内容 类别名称 2 内容 内容

当我单击类别名称时，我只想显示/隐藏其内容，目前当我单击类别名称时，它会显示并隐藏所有类别。

 var reportFilters = [
         Text: "Campaign", Value: primaryCategories.Campaign ,
         Text: "Team", Value: primaryCategories.Team ,
         Text: "Agent", Value: primaryCategories.Agent ,
         Text: "List", Value: primaryCategories.List ,
         Text: "Inbound", Value: primaryCategories.Inbound ,
         Text: "Daily", Value: primaryCategories.Daily ,
         Text: "Services", Value: primaryCategories.Services ,
         Text: "Occupancy", Value: primaryCategories.Occupancy ,
         Text: "Data", Value: primaryCategories.Data 
    ];


  self.showCategory = ko.observable(false);      
    self.toggleVisibility = function (report) 
        var categoryName = report.PrimaryReportCategory;
        var categoryContent = report.ID;
        if (categoryName == categoryContent ) 
            self.showCategory(!self.showCategory());
        ;
    
  <div class="report-category-treeview"  data-bind="foreach: $root.categories, mCustomScrollBar:true">
            <ul class="column-list" >
                <li class="report-category-heading" data-bind="click: $root.toggleVisibility"><span class="margin-top10" ><i class="fas fa-chevron-down"></i> <span class="report-category-name" data-bind="text: categoryName"></span></span></li>
                <li id="panel" class="report-category-container" data-bind="foreach: reports, visible: $root.showCategory">
                    <div class="column-list-item" data-bind="click: $root.report_click, css:  'selected': typeof $root.selectedReport() != 'undefined' && $data == $root.selectedReport() ">
                        <span class="column-list-text" data-bind="text: ReportName"></span>
                    </div>
                </li>
            </ul>
        </div>

【参考方案1】：

目前，当我单击类别名称时，它会显示和隐藏所有 类别。

这是因为showCategory 是您负责显示\隐藏的唯一可观察对象。您真正想要的是一个节目\隐藏可观察的每个类别。

我不确定你的整个数据模型是什么样的，但既然你特别询问了categories，那么你应该创建一个category 视图模型，可能还有一些容器视图模型，我将在这里命名master:

var categoryVM = function (name) 
    var self = this;
    self.name = ko.observable(name);
    self.isVisible = ko.observable(false);
    self.toggleVisibility = function () 
        self.isVisible(!self.isVisible());
    
    // ... add here your other observables ...


// name 'masterVM' whatever you like
var masterVM = function () 
    var self = this;
    self.categories = ko.observables([]);
    // ... probably add here other observables, e.g. 'reports' ...
    self.init = function (rawCategories) 
        rawCategories.forEach(function (item) 
            categories.push(new categoryVM(item.name)); // replace 'name' with your property
        
    


var master = new masterVM();
master.init(getCategories()); // pass in your categories from wherever they come from
ko.applyBindings(master);

然后，在您的 html 中，这将是您的外部 foreach：

<div class="report-category-treeview" data-bind="foreach: categories ... />

还有你的lis（为简洁起见，我在你的lis 下省略了嵌套标签）：

<li class="report-category-heading" 
    data-bind="click: toggleVisibility">
<li id="panel" class="report-category-container" 
    data-bind="foreach: $root.reports, visible: isVisible">