使用 Knockout.js 的动态表答案

【问题标题】：dynamic table using Knockout.js使用 Knockout.js 的动态表
【发布时间】：2013-04-21 12:11:00
【问题描述】：

我正在创建一个动态表，说具有 A、B、C 列并用数据填充它，我还有 1 个列表框，其中我有 A、B、C 作为复选框，因此基于选定的复选框，我正在显示列，例如我已经从列表框中选择了 B、C，然后我只能为 B、C 而不是 A 创建表，为此场景创建 jquery 模板并使用 Knockout.js 进行数据绑定是我正在寻找的，但我怀疑模板是否可以在这种情况下使用，因为我的桌子太动态了..所以我的问题是在这种情况下是否可以使用淘汰赛。如果不是，那么我使用纯 jquery 的方法将是正确的选择。

如果我遵循 jquery 方法，我将 View 和 ViewModel 分开的想法将是一个问题，因为在这种情况下，View Model 将具有 jquery 相关的视图操作

这方面的任何示例都将非常有用。

感谢和问候，萨杰什·南比亚尔

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使用挖空轻松隐藏/显示表格列。一种简单但有效的方法是使用列上的visible 绑定来控制其可见性。

这是一个演示这个想法的小提琴：http://jsfiddle.net/Ex9J9/42/

编辑 - 更新小提琴以修复 Knockout 资源的 404 错误

查看：

<h4>Select Columns:</h4>
<ul data-bind="foreach: gridOptions.columns">
    <li>
        <label>
            <input type="checkbox" data-bind="checked: isVisible" /> <span data-bind="text: header"></span>
        </label>
    </li>
</ul>
<hr>
<table>
    <thead>
        <tr data-bind="foreach: gridOptions.columns">
            <th data-bind="visible:isVisible, text: header"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="foreach: $parent.gridOptions.columns">
            <td data-bind="text: $parent[dataMember], visible:isVisible"></td>
        </tr>
    </tbody>
</table>

查看模型：

var vm = {
    gridOptions: {
        columns: [{
            header: 'First Name',
            dataMember: 'firstName',
            isVisible: ko.observable(true)
        }, {
            header: 'Last Name',
            dataMember: 'lastName',
            isVisible: ko.observable(true)
        }]
    },

    people: [{
        firstName: 'Bert',
        lastName: 'Bertington'
    }, {
        firstName: 'Charles',
        lastName: 'Charlesforth'
    }, {
        firstName: 'Denise',
        lastName: 'Dentiste'
    }]
};

ko.applyBindings(vm);

【讨论】：

【解决方案2】：

如果选项很小，例如 3 左右，您可以创建三个模板，然后在页面中执行以下操作：

<!-- ko 'if': AIsSelectedAndNotBOrC == true -->
//display the tmeplate
<!-- /ko -->

// 为您的其他变体执行此操作...

这会起作用，但如果你有很多变化，那么它可能太麻烦了。

【讨论】：