如何将 Knockout 模型数据绑定到多个表答案

【问题标题】：How to bind Knockout model data to Multiple tables如何将 Knockout 模型数据绑定到多个表
【发布时间】：2015-08-05 06:34:52
【问题描述】：

我正在使用敲除绑定将一些数据绑定到 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 https://jsfiddle.net/sirisha_k/0Ln7h2bo/7/

【问题讨论】：

这样的事情让我们知道jsfiddle.net/0Ln7h2bo/8（我硬编码到索引0以显示o / p）。欢呼
chars表不应该是嵌套表吗？
@WayneEllery 我相信它应该是。 OP的清晰度会很棒
@supercool "data-bind: with" thts 我一直在寻找的东西。谢谢:-)
@sirisha 你的整个方法违背了淘汰赛的基本使用原则。如果你想使用敲除，所有的 jQuery 事件绑定和所有在视图模型之外修改/保存数据都需要去。如果你想用jQuery，那就踢淘汰赛。你不应该同时使用两者。

标签： html knockout.js

【解决方案1】：

正如@supercool 指出的那样，您可以使用“data-bind='with selectedItem'”来用字符数据填充第二个表。为此，您需要在模型中添加一个名为 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);
}

【讨论】：