1

我正在尝试创建一个表，利用 Knockout，我可以在其中选择一个，在所选行下方插入一些功能，做一些事情，并能够删除插入的行。我实际上可以让行插入正常工作，但是失去了绑定到循环项的父项的功能。

HTML 看起来像这样：

<table data-bind="visible: currentRecord() === null">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Affiliation</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="template: {name: 'row-template', foreach: records}">

    </tbody>
</table>

我使用两个模板（一个用于单行，一个用于包含单行的行）

<script id="row-template" type="text/html">
    <tr class="actual-row">
        <td class="ui-icon ui-icon-circle-arrow-e" data-bind="insertRow: {
            templateName: 'custom-template', 
            rowIdentifier: 'extra-content', 
            singleRowTemplate: 'row-template',
            data: $data}">
                <input type="hidden" data-bind="value: Id" />
        </td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Affiliation"></td>
        <td><a href="#" data-bind="click: $root.clickMe">Click Me!</a>
    </tr>
</script>

<script id="custom-template" type="text/html">
    <!-- ko template: { name: 'row-template' } -->
    <!-- /ko -->
<tr id="extra-content">
    <td colspan="4" > 
        <div>You have: <input type="number" data-bind="value: currentAmount,     valueUpdate: 'keypress'" /> </div>
        <div>You need <strong data-bind="text: Max - currentAmount()" > </strong> more</div > 
    </td>
</tr>
</script>

在创建过程中，绑定是完美的。我可以点击点击我！锚就好了。但是，当我执行代码以插入行时，它会运行一个自定义绑定处理程序，该处理程序调用

ko.renderTemplate(value.templateName, value.data, {}, cell.parent(), "replaceNode");

在哪里

  • value 是传入 insertRow bindingHandler 的 JS 对象
  • cell 是单击以插入/删除特殊行的 TD 元素的 jQuery 对象。

我怀疑个人记录与其父记录之间的关系丢失了，我不知道如何利用它。谁能帮我？

我有一个小提琴，我一直在这里玩。

4

1 回答 1

0

您的任务可以以更简单的方式解决。您甚至不需要编写如此复杂的自定义绑定，因为每个超级英雄的可扩展行都是相同的。

只需为每个超级英雄添加 2 行，但使一行不可见：

<tbody data-bind="foreach: records">
    <tr class="actual-row">
        <td class="ui-icon ui-icon-circle-arrow-e" 
        data-bind="click: expanded.toggle">
            <input type="hidden" data-bind="value: Id" />
        </td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Affiliation"></td>
        <td><a href="#" data-bind="click: $root.clickMe">Click Me!</a>

        </td>
    </tr>
    <tr id="extra-content" data-bind="visible: expanded">
        <td colspan="4">
            <div>You have:
                <input type="number" data - bind="value: currentAmount, valueUpdate: 'keypress'" />
            </div>
            <div>You need <strong data-bind="text: Max - currentAmount()"></strong > more </div> 
</td> </tr>

</tbody>

让visible绑定到行数据中的一些可观察值：

ko.utils.arrayForEach(self.records(), function(rec){
    rec.expanded = ko.observable(false);
    rec.expanded.toggle = function(){
        rec.expanded(!rec.expanded());
    };
});

这样你就可以让它工作了：http: //jsfiddle.net/sQvUK/6/

PS 唯一没有做的事情是箭头图标的类切换器。

于 2013-10-12T19:51:09.063 回答