modèle de vue Knockout contraignant

Question

permet de dire que j'ai une table:

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

J'ai un modèle knock-out:

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

Et 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); 
}); 
}); 

Ce que je veux est une table qui contient les lignes parents. Si je clique sur une ligne parente, j'appelle pour ses enfants via ajax. Quand je reçois les enfants, je veux montrer une table pour tous les enfants sous la rangée des parents.

Le problème avec le code ci-dessus est que j'applique des liaisons à la page entière. Ce que je veux vraiment, c'est lier ce modèle de vue uniquement à cette ligne parente. Si je clique d'abord sur la ligne parente # 1, elle affichera les enfants corrects, mais lorsque je clique sur la ligne parente # 2, les deux listes d'enfants contiendront les mêmes éléments.

je me représentais mon problème dans jsFiddle: http://jsfiddle.net/6ehfb/1/

Si vous cliquez d'abord sur la ligne Développer mère # 1, il affiche un objet enfant # 1. Lorsque vous cliquez sur Développer sur la ligne parente # 2, les deux listes d'enfants contiennent les mêmes éléments. Les enfants de la ligne parent # 1 ne doivent pas être affectés lors de l'expansion de la ligne parent # 2.

Comment réparer?

Answer 1

Une solution possible serait de définir un seul modèle de vue qui contient une collection de parents. Cela signifierait que chaque parent pourrait avoir son propre tableau séparé d'enfants.

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

J'ai fourni une solution de travail qui se trouve à 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> 

Side note: Dans le cadre de cette solution, je l'ai laissé gérer knock-out événements onClick (» expand "function" et mise à jour du code HTML sur la page.