Knockout js foreach binding with expand/collapse

Question

I've read a couple tutorials and tried for a couple hours trying to get this to work. My goal is to have multiple links that expand/collapse when they are clicked on. So far I have the following:

HTML:

<ul data-bind="foreach: items">
    <a href="#" data-bind="click: $parent.toggle, text: $parent.linkLabel"></a>        
    <button data-bind="text: name, click: $parent.clickTask"></button>
    <div data-bind="visible: $parent.expanded">
        <input data-bind="value: name"></input>
    </div>
</ul>

JS:

var viewModel = function() {
    var self = this;

    self.items = [{"name":"bruce","id":1},{"name":"greg","id":2}]

    self.expanded = ko.observable(false);

    self.linkLabel = ko.computed(function () {
        return self.expanded() ? "collapse" : "expand";
    }, self);      

    self.toggle = function (item) {
        self.expanded(!self.expanded());
    };
};

ko.applyBindings(new viewModel());

JSFiddle Here

I understand right now I have the expanded state on the parent which is why everything expands/collapses. How would I get each item to keep track of its own expand/collage state?

Answer 1

I was just solving something very similar and I think there is a way to get around without adding any logic to the ViewModels.

The following code works for a table where each row is expandable:

<tbody data-bind="foreach: payments">
    <tr style="cursor: pointer" data-toggle="collapse" data-bind="attr: {'data-target': '#row' + $index()}">
        <td>Column 1 content</td>
    </tr>
    <tr data-bind="attr: {id: 'row' + $index()}" class="collapse">
        <td>
            Detail....
        </td>
    </tr>
</tbody>

It uses 2 times the attr binding, once to define the id of the generated detail row and once for setting the data-target of the collapse toggle.

Your example could be modified in the following way and you won't need the "expanded" observable at all.

<ul data-bind="foreach: items">
<a href="#" data-toggle="collapse" data-bind="attr: {'data-target': '#row' + $index()}"></a> 
    <button data-bind="text:name"></button>
    <div data-bind="attr: {id: 'row' + $index()}" class="collapse">
        <input data-bind="value:name"></input>
    </div>
</ul>

Answer 2

well you are creating a single dependency for all observable's by referring parent which is the issue here .

So you need to have independent dependency for each list item and make use of $data which refers current context . So trick here is creating a instance for each listitem

view:

<ul data-bind="foreach: items"> <a href="#" data-bind="click: toggle, text:linkLabel"></a> 
    <button data-bind="text:name"></button>
    <div data-bind="visible:expanded">
        <input data-bind="value:name"></input>
    </div>
</ul>

viewModel:

function Sample(item) {
    var self = this;
    self.name = ko.observable(item.name);
    self.id = ko.observable(item.id);
    self.expanded = ko.observable(false);
    self.toggle = function (item) {
        self.expanded(!self.expanded());
    };
    self.linkLabel = ko.computed(function () {
        return self.expanded() ? "collapse" : "expand";
    }, self);
}

var viewModel = function () {
    var self = this;

    var json = [{
        "name": "bruce",
        "id": 1
    }, {
        "name": "greg",
        "id": 2
    }]

    var data = ko.utils.arrayMap(json, function (item) {
        return new Sample(item); // making things independent here 
    });
    self.items = ko.observableArray(data);
};

ko.applyBindings(new viewModel());

working sample up here