1

ノックアウトを利用してテーブルを作成しようとしています。テーブルを選択し、選択した行の下にいくつかの機能を挿入し、いくつかのことを行い、挿入された行を削除できます。実際に行の挿入を正しく機能させることはできますが、ループされたアイテムの親にバインドされている機能が失われています。

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>

2 つのテンプレートを使用します (1 つは単一行用、もう 1 つは単一行を含む行用)。

<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>

作成中、バインディングは完璧です。Click Me!をクリックできます。アンカーは問題ありません。ただし、コードを実行して行を挿入すると、次のカスタム バインディング ハンドラーが実行されます。

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

どこ

  • value は、insertRow bindingHandler に渡される JS オブジェクトです
  • cell は、特別な行を挿入/削除するためにクリックされた TD 要素の jQuery オブジェクトです。

個々のレコードとその親レコードの間の関係が失われていると思われ、それを活用する方法がわかりません。誰でも私を助けることができますか？

ここで遊んでいるフィドルがあります。

4

1 に答える 1

0

あなたの仕事はもっと簡単な方法で解決できます。展開可能な行はすべてのスーパーヒーローで同じであるため、非常に複雑なカスタム バインディングを記述する必要さえありません。

スーパーヒーローごとに 2 つの行を追加するだけで、1 つの行を非表示にします。

<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 に答える