将元素绑定到observableArray中的observableArray

时间:2013-07-02 21:44:13

标签: html asp.net knockout.js

我无法理解为什么这种绑定设置无效。

我有一个带有id和name的Page对象,我有一个pendingBatchDocument,其中包含batchDocumentId observable和一个observableArray页面。在我的viewmodel中,我正在尝试用PendingBatchDocument初始化一个可观察数组,并用它们的Pages数组初始化那些PendingBatchDocuments。

语法没有给我任何错误,所以我假设那里的设置没问题。如果不对,请告诉我。

我的问题是,为什么第二个foreach的约束不起作用?

查看

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

Javascript查看模型

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

1 个答案:

答案 0 :(得分:2)

foreach绑定中的上下文是单个数组元素,这意味着在foreach: pendingDocs内,您已经可以访问PendingBatchDocument实例,因此可以使用其pages物业直接:

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