Question

我有数组的表格＃表，表＃2，...表＃10

我想点击table-number，然后在面板中显示该表显示的列表项。

以下是代码段。

HTML，唯一的问题就是这一行。我想动态更改数字并在点击列表数量时刷新。

<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数组

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

申请KO

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

我不想使用更多的部分绑定。因为我在这个页面中使用了太多的绑定。

谢谢大家

Answer 1

您应该在ViewModel

中创建一个currentTable observable

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

并将其绑定到currentTable

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

当您更改表格时，请执行以下操作：

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

您可以将表保存在observableArray中，并按索引对其进行检索。

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

这是the way我解决了你的问题。我显示数据时有点复杂，所以不要注意它们。

knockoutJS动态变化foreach绑定

2 个答案: