связывание элементов с наблюдаемым массивом в пределах наблюдаемого массива

Question

У меня возникли проблемы с пониманием того, почему эта привязка не работает.

У меня есть объект страницы с идентификатором и именем, у меня есть pendingBatchDocument с наблюдаемым batchDocumentId и страницами наблюдаемого массива. В моей модели viewmodel я пытаюсь инициализировать наблюдаемый массив с помощью PendingBatchDocument и инициализировать эти PendingBatchDocuments своим массивом Pages.

Синтаксис не дает мне никаких ошибок, поэтому я предполагаю, что настройка там ОК. Дайте мне знать, если это не так.

Мой вопрос в том, почему не является обязательным для второго рабочего foreach?

Посмотреть

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

Javascript View Model

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

контекст внутри foreach связывания является отдельный элемент массива, а это значит, внутри foreach: pendingDocs, у вас уже есть доступ к PendingBatchDocument, так что вы можете использовать его pages ty непосредственно:

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