Liaison d'éléments à observableArray dans observableArray

Question

Je n'arrive pas à comprendre pourquoi cette configuration de liaison ne fonctionne pas.

J'ai un objet Page avec un identifiant et un nom, j'ai un fichier pendingBatchDocument avec un objet batchDocumentId et une table observableArray. Dans mon viewmodel, j'essaie d'initialiser un tableau observable avec PendingBatchDocument et d'initialiser ces PendingBatchDocuments avec leur tableau de Pages.

La syntaxe ne me donne aucune erreur donc je suppose que la configuration est OK. Faites-moi savoir si ce n'est pas correct. Ma question est la suivante: pourquoi la reliure sur le deuxième foreach n'est-elle pas active?

Voir

<div data-bind="foreach: pendingDocs"> 
    <ul class="sortable" data-bind="foreach: pendingDocs().pages()"> 
    </ul> 
</div> 

Javascript Voir modèle

function Page(id, name) 
{ 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
} 

var PendingBatchDocument = function(batchDocumentId, pages) 
{ 
    this.batchDocumentId = ko.observable(batchDocumentId); 
    this.pages = ko.observableArray(pages); 
}; 

var ViewModel = function() 
{ 
    this.list1 = ko.observableArray([ 
    { itemId: "C1", name: "Item C-1" }, 
    { itemId: "C2", name: "Item C-2"}, 
    { itemId: "C3", name: "Item C-3"}, 
    { itemId: "C4", name: "Item C-4"}, 
    { itemId: "C5", name: "Item C-5"}, 
    { itemId: "C6", name: "Item C-6"}, 
    { itemId: "C7", name: "Item C-7"}]); 

    this.pendingDocs = ko.observableArray([ 
    new PendingBatchDocument(1, [ 
     new Page(1, "Page 1"), new Page(2, "Page 2"), new Page(3, "Page 3") 
    ]) 
    ]); 
}; 

ko.applyBindings(new ViewModel()); 

JSBin http://jsbin.com/ivavew/3/edit

Answer 1

Le contexte à l'intérieur du foreach de liaison est un élément de tableau individuel, ce qui signifie que l'intérieur foreach: pendingDocs, vous avez déjà l'accès à PendingBatchDocument instance, de sorte que vous pouvez utiliser son pages propre ty directement:

<div data-bind="foreach: pendingDocs"> 
    <ul class="sortable" data-bind="foreach: pages"> 
    </ul> 
</div>