Knockout changing data-bind based on user selection

Question

I have some knockout code that consists of a list object and item object. There could be multiple lists and each list has an array of objects. I made this fiddle to demonstrate what I am trying to explain. What I want to be able to do is have a select box where the user can select a list and then the items from that list will be loaded. Currently I have my data-bind set up like this data-bind="foreach: lists[0].items". The index of the list is hard codded into the bind. Is there some way that I could dynamically assign the index of the list I wish to use?

Answer 1

Just put an observable instead of 0:

data-bind="foreach: lists[selectedIndex()].items"

With selectedIndex: self.selectedIndex = ko.observable(0);