knockoutJS dynamic change foreach binding

Question

I have list of array let'say table#1, table#2, ... table#10

and I want to click table-number then show list-items of that table show in the panel.

Here is snippet code.

HTML, only problem is this line. I want to dynamic change number and refresh when click list number of tables.

<div data-bind="foreach: table[number].lines">  //  <--  this  line
            <p>
                <span data-bind="text: name"></span>, 
                <span data-bind="text: qty"></span> @
                <span data-bind="text: price"></span> = 
                <span data-bind="text: extendedPrice"></span>
            </p>
        </div>

obj array

var table = new Array();
table[0] = new tableClass('one');
table[1] = new tableClass('two');
table[2] = new tableClass('three');
table[3] = new tableClass('four');

apply KO

ko.applyBindings(table, $('#tablePos').get(0));

I don't want to use more partial binding. because i used too many binding in this page.

thank you all

Answer 1

You should make a currentTable observable in your ViewModel

var currentTable = ko.observable(table[0]);

and bind it to the currentTable

<div data-bind="foreach: currentTable.lines">

and when you change a table just do :

currentTable(table[2]);

.

function InitViewModel() {
    function ViewModelFunction() {
        this.currentTable = ko.observable(table[0]);

        ... more observables

    }
    window.ViewModel = new ViewModelFunction();

    ko.applyBindings(window.ViewModel);
}

$(document).ready(function () {
    InitViewModel();
});

var table = new Array();
table[0] = new tableClass('one');
table[1] = new tableClass('two');
table[2] = new tableClass('three');
table[3] = new tableClass('four');

function onSomeEvent(number) {
    window.ViewModel.currentTable(table[number]);
}

...
as many bindings as you want to observables in the ViewModel
...

Answer 2

You can save your tables in an observableArray and retrive them by their index.

self.SelectedIndex = ko.observable(0); // save index of selected table
self.List = ko.observableArray([]); // list to save your tables

// Retrieve your selected table by ko.computed
self.SelectedList = ko.computed(function() {
    return self.List()[self.SelectedIndex()];
});

// ... init your tables or sth below

This is the way I solved your problem. It's a bit complex when I display data so don't notice them.