Utilisation de plusieurs modèles et liaisons dans une seule vue

Question

J'utilise KnockoutJS pour afficher une liste d'images. Dites que j'utilise un modèle X pour afficher cette liste et j'ai défini un autre modèle Y pour afficher les détails dans une boîte de dialogue séparée d'une image sélectionnée. Je suis confronté à des problèmes de fixation de l'image sélectionnée avec ce modèle de détail Y. Voici une maquette/code partiel de mon point de vue réelle

ViewModel:

var viewModel { 
    photos:ko.observableArray(//list of photos), 
    showDetails:function(item){ 
     //show the details of the selected image in dialog 
    } 
}; 

La liaison est appliqué comme

ko.applyBindings(viewModel); 

Voici comment X est défini

<script id="X" type="text/html"> 
    {{each(i,item) photos()}} 
     <a href="javascript:;" data-bind="click:function(){showDetails(item);}">show Image</a> 
    {{/each}} 
</script> 

Voici comment le modèle est appliqué

<div class="list" data-bind="template: {name:'X'}"></div> 

Ceci est un modèle de Y mockup

<script id="Y" type="text/html"> 
    <img src="{url}" /> 
</script> 

Comment dois-je définir les showDetails fonction d'appliquer les liaisons à le modèle Y?

Answer 1

Voici un exemple qui fonctionne: http://jsfiddle.net/rniemeyer/MCQgY/.

Le plus simple est de définir une observable qui représente la photo sélectionnée. La liaison de clic doit alors simplement définir l'observable en l'appelant comme suit: viewModel.selectedPhoto ($ data).

Espérons que cela aide. Faites-moi savoir si vous avez d'autres questions ou problèmes.