CODEWITHSUNDEEP
knockout.js
Martin Nilsson
Martin Nilsson

Reputation: 519

Show only one element from an array

I am having an observableArray() and I show all elements in a list with a foreach binding. Now I want to show only one of the elements next to the list with some detailed information about the element when someone clicks it in the list. How do I do such a thing? Maybe I am making some bad search but I can´t find any answers on Google.

Best regards, Martin

Upvotes: 0

Views: 935

Answers (1)

sroes
sroes

Reputation: 15053

Introduce a new observable for the selected item:

self.selectedItem = ko.observable();

Then add a click binding within your list:

<ul data-bind="foreach: items">
    <li data-bind="click: $root.selectedItem, value: text"></li>
</ul>

Then your detailed info could look something like this:

<div data-bind="visible: selectedItem, if: selectedItem">
    <h2 data-bind="text: selectedItem().text"></h2>
</div>

Upvotes: 1

Related Questions