Question

我的下表有敲除绑定：

<table class="table">
    <thead>
        <tr data-bind="foreach: ActiveHeaders">
            <td>
                <input type="text" data-bind="value: $root.dynamicFilter(Filter), valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
            </td>
        </tr>
        <tr data-bind="foreach: ActiveHeaders">
            <th>
                <a style="cursor:pointer" data-bind="text:Filter, click: function(data){$root.loadArticles('1',Filter, data)}"></a>
            </th>
        </tr>
    </thead>
    <tbody class="articleListing" data-bind="foreach: Articles">
        <tr data-bind="foreach: $parent.columnNames">
            <td>
                <span data-bind="text:  $parent[$data], event: { dblclick: function(data,event){ $root.editField($parent, data, event)}}"></span>
                <input type="text" class="thVal" data-bind="value:  $parent[$data]" style="display:none;" />
            </td>                
        </tr>
    </tbody>
</table>

我正在动态绑定列（未知列数），这些列是由用户配置的。我想添加一个静态列作为表中的最后一列，该列将具有Delete按钮且没有标题，并且绑定到Articles绑定中的<tbody foreach>对象，单击此处将调用一个方法，并将通过ajax调用删除db中的该记录。我想做这样的事情：

<table class="table">
    <thead>
        <tr data-bind="foreach: ActiveHeaders">
            <td>
                <input type="text" data-bind="value: $root.dynamicFilter(Filter), valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
            </td>
        </tr>
        <tr data-bind="foreach: ActiveHeaders">
            <th>
                <a style="cursor:pointer" data-bind="text:Filter, click: function(data){$root.loadArticles('1',Filter, data)}"></a>
            </th>
        </tr>
    </thead>
    <tbody class="articleListing" data-bind="foreach: Articles">
        <tr data-bind="foreach: $parent.columnNames">
            <td>
                <span data-bind="text:  $parent[$data], event: { dblclick: function(data,event){ $root.editField($parent, data, event)}}"></span>
                <input type="text" class="thVal" data-bind="value:  $parent[$data]" style="display:none;" />
            </td>       
            <td>
               <input type="button" value="Delete" data-bind="click: $root.deleteArticle" />
            </td>         
        </tr>
    </tbody>
</table>

如何动态绑定列，我该怎么做？

Answer 1

您可以使用基于注释标记的无容器控制流语法。您可以阅读详细信息here。像这样：

<table class="table">
    <thead>
        <tr>
            <!-- ko foreach: ActiveHeaders -->
                <th>
                    <input type="text" data-bind="value: $root.dynamicFilter(Filter), valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
                </th>
            <!-- /ko -->
            <th>
                Fixed
            </th>
        </tr>
        <tr>
            <!-- ko foreach: ActiveHeaders -->
                <th>
                    <a style="cursor:pointer" data-bind="text:Filter, click: function(data){$root.loadArticles('1',Filter, data)}"></a>
                </th>
            <!-- /ko -->
            <th>
                Fixed
            </th>
        </tr>
    </thead>
    <tbody class="articleListing" data-bind="foreach: Articles">
        <tr>
            <!-- ko foreach: $parent.columnNames -->
            <td>
                <span data-bind="text:  $parent[$data], event: { dblclick: function(data,event){ $root.editField($parent, data, event)}}"></span>
                <input type="text" class="thVal" data-bind="value:  $parent[$data]" style="display:none;" />
            </td>      
            <!-- /ko -->
            <td>
               <input type="button" value="Delete" data-bind="click: $root.deleteArticle" />
            </td>         
        </tr>
    </tbody>
</table>

Answer 2

我相信它就像在文章的每个列数组的末尾添加整个固定列一样简单。

或者您可以在项目模板中添加整个列并绑定删除以查看模型的根目录（即click: $root.removeArticle.bind(this)，并注意removeArticle使用{ {1}}所以bind(...)将成为文章！）。

在淘汰赛中在foreach绑定中添加静态列

2 个答案: