如何将淘汰制模型数据绑定到多个表

Question

我使用敲除绑定将一些数据绑定到html表中。我的淘汰赛视图模型有多个产品，每个产品将有多个字符。我想在一个表中显示产品，当我选择“显示字符”链接时，它应该在下表中显示相应的字符。

这是我的视图模型

var ProductViewModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); 
            this.itemToAdd(""); 
        }
    }.bind(this);
};

这是我的html表

<div id="productTable">
        <table  class="ui-responsive table">
            <thead>
                <tr>
                    <th >Product Name</th>
                    <th >Description</th>
                    <th >Parent?</th>
                </tr>
            </thead>
            <tbody id="pBody" data-bind="foreach: items">
                <tr class="success" >
                    <td><span data-bind="text: name"></span>

                    </td>
                    <td><span data-bind="text: desc"></span>

                    </td>
                    <td><a href="#" onclick="showChars();return false;">show chars</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="productChars">
    <div id="productCharTable">
        <table  class="ui-responsive table">
            <thead>
                <tr>
                    <th >Char Name</th>
                    <th >Description</th>
                    <th >Length</th>
                    <th >Type</th>
                </tr>
            </thead>
            <tbody id="pBody" data-bind="foreach: $data['chars']">
                <tr class="success">
                    <td><span data-bind="text: name"></span>
                    </td>
                    <td>asdf asdfasdf</td>
                    <td>10</td>
                    <td>String</td>
                </tr>
            </tbody>
        </table>
    </div>

我能把产品装到第一张桌子上。但对于我的特点，我不知道如何实现同样。

有谁能帮我弄清楚如何实现同样的目标吗？

这里是jsfiddle k/0Ln7h2bo/7/

Answer 1

正如@Super酷所指出的，您可以使用“data -bind=‘’”来填充第二个表中的chars数据。为此，您需要在模型中再添加一个名为selectedItem的项，每次选择或添加一行时，都会将selectedItem指向该元素数据。并对第二个表使用"data-bind='with selecteItem'“。

var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.selectedItem = ko.observableArray();
this.itemToAdd = ko.observable("");
this.addItem = function() {
    if (this.itemToAdd() != "") {
        this.items.push(this.itemToAdd()); 
        this.itemToAdd(""); 
    }
}.bind(this);

}；

并在行选择调用某些函数selectedItem( $data )，其中$data引用当前项。

然后在模型中将数据设置为selectedItem。

function selectedItem(prod){
    ProductViewModel.selectedItem(prod);
}