What is the best way to toggle each div individually in a knockout foreach without requiring additional HTML?

Question

What is the best way to toggle each div individually in a knockout foreach without requiring additional HTML?

In order to create a treeview, I utilized the foreach method to generate markup for each item in an observable array.

Here is an example output:

Category Name 1 Content Content Category Name 2 Content Content

My issue arises when clicking on a category name - instead of toggling just its content, all categories are currently being shown/hidden.

 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>

javascript arrays knockout.js

Answer 1

Answer №1

At the moment, every time I select a category name, it causes all categories to either appear or disappear.

This happens because the observable showCategory is in charge of toggling the visibility for all categories. What you actually need is an individual show/hide toggle for each category.

Although I don't have the complete data model, based on your question regarding categories, you should consider creating a separate view model for category, along with a container view model referred to as 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 any other necessary observables here ...
}

// You can name 'masterVM' whatever you prefer
var masterVM = function () {
    var self = this;
    self.categories = ko.observables([]);
    // ... feel free to include additional observables like 'reports' ...
    self.init = function (rawCategories) {
        rawCategories.forEach(function (item) {
            categories.push(new categoryVM(item.name)); // make sure to replace 'name' with the appropriate property
        }
    }
}

var master = new masterVM();
master.init(getCategories()); // provide the categories from your data source
ko.applyBindings(master);

In your HTML markup, your outer foreach could look like this:

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

And your list items (li) - without nested tags for brevity - would be structured as follows:

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

Answer 2

At the moment, every time I select a category name, it causes all categories to either appear or disappear.

This happens because the observable showCategory is in charge of toggling the visibility for all categories. What you actually need is an individual show/hide toggle for each category.

Although I don't have the complete data model, based on your question regarding categories, you should consider creating a separate view model for category, along with a container view model referred to as 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 any other necessary observables here ...
}

// You can name 'masterVM' whatever you prefer
var masterVM = function () {
    var self = this;
    self.categories = ko.observables([]);
    // ... feel free to include additional observables like 'reports' ...
    self.init = function (rawCategories) {
        rawCategories.forEach(function (item) {
            categories.push(new categoryVM(item.name)); // make sure to replace 'name' with the appropriate property
        }
    }
}

var master = new masterVM();
master.init(getCategories()); // provide the categories from your data source
ko.applyBindings(master);

In your HTML markup, your outer foreach could look like this:

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

And your list items (li) - without nested tags for brevity - would be structured as follows:

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

What is the best way to toggle each div individually in a knockout foreach without requiring additional HTML?

Answer №1

Similar questions

angular ensuring seamless synchronization of objects across the application

The NPM Install process seems to be skipping certain files that were successfully installed in the past

Issue with grunt-closure-tools: ERROR - There is a parse error due to using a reserved word as an

Creating a dynamic variable within a for loop and calculating the total of values to assign to that variable

Updating ngModel value dynamically from controller

react - Arrow body should not be enclosed in a block statement

Unique ActionBar design for my NativeScript-Vue application

Searching with RegEx results in a negative value, despite the fact that the specified phrase is clearly within the array

tips for utilizing namespaced getter filtering within a Vuex module in vueJs

Resolve the problem with storing data in a foreach loop using PHP sessions

Finding a way to extract a singular text node after the Span element but before the br tag using Selenium WebDriver

CSS media query to target specific viewport width

Netbeans encountering issues with AJAX functionality

What is the quickest method to display the current year using Node.js?

Variations in how arrays are declared in Swift

unable to configure socket.io to start listening on IPv4 address

I'm having trouble using the $max field update operator in Mongoose. Can anyone offer any suggestions or advice?

Open up the index.html page whenever the page is refreshed

The CSP header is configured incorrectly, please correct it

Employing jQuery Validate to emphasize the label when it is deemed invalid