1

テーブルがあるとしましょう：

<table>
 <tr class="expandable">
  <td><button>Expand</button></td>
  <td>Parent information #1</td>
  <td>Parent information #2</td>
 </tr>
 <tr class="expandable">
  <td><button>Expand</button></td>
  <td>Parent information #1</td>
  <td>Parent information #2</td>
 </tr>
</table>

ノックアウト テンプレートがあります。

<script type="text/html" id="child-template">
 <!-- ko foreach: children -->
  <tr>
   <td></td>
   <td>Child information #1</td>
   <td>Child information #2</td>
  </tr>
 <!-- /ko -->
</script>

そしていくつかのjavascript

$('button').click(function() {
 $.getJSON(url, function(items) {
  var template = $('#child-template').html();
  $(this).closest('tr').after(template);
  var viewModel = { children: ko.observableArray(items) };
  ko.applyBindings(viewModel);
 });
});

私が欲しいのは、親行を含むテーブルです。親行をクリックすると、ajax を介してその子が呼び出されます。子を取得したら、親行の下にあるすべての子のテーブルを表示したいと思います。

上記のコードの問題は、バインディングをページ全体に適用することです。私が本当に欲しいのは、そのビュー モデルをその親行にのみバインドすることです。最初に親行 #1 をクリックすると、正しい子が表示されますが、親行 #2 をクリックすると、両方の子リストに同じアイテムが含まれます。

JSFiddle で問題を視覚化しました: http://jsfiddle.net/6ehfb/1/

最初に親行 #1 で [展開] をクリックすると、子アイテム #1 が表示されます。親行 #2 で [展開] をクリックすると、両方の子リストに同じアイテムが含まれます。親行 #2 を展開する場合、親行 #1 の子は影響を受けません。

直し方？

4

1 に答える 1

3

可能な修正は、親のコレクションを含む単一のビュー モデルを定義することです。これは、各親が独自の子の配列を持つことができることを意味します。

function generateParent(name, id)
{
    function show() {
        this.expanded(true);
    }

    function initalDataCollection() {
        // Get data, add data to model
        // ...

        this.expanded(true);
        this.showAction(show);
    }

    return {
        expanded: ko.observable(false),
        information: ko.observable(name),
        children: ko.observableArray(),
        showAction: ko.observable(initalDataCollection)
    };
}

var viewModel = {
    parents: ko.observableArray()
};

//Add parent data to model
// ...

ko.applyBindings(viewModel);

http://jsfiddle.net/MatthewDunsdon/khMG8/で見つけることができる実用的なソリューションを提供しました

HTML:

<table border="1" data-bind="foreach: parents">
     <tr class="expandable">
        <td>
            <button data-bind="visible: !expanded(), click: showAction() ">Expand</button>
            <button data-bind="visible: expanded(), click: function() { expanded(false) }">Hide</button>
         </td>
        <td><span data-bind="text: information"></span></td>
     </tr>
    <!-- ko if: expanded -->
    <!-- ko foreach: children -->
    <tr>
        <td></td>
        <td data-bind="text: info"></td>
    </tr>
    <!-- /ko -->
    <!-- /ko -->

</table>

補足: このソリューションの一部として、ノックアウトに onClick イベント (「展開」機能) を処理させ、ページの html を更新させました。

于 2013-10-09T22:49:08.800 に答える