binding elements to observableArray within observableArray

Question

I'm having trouble understanding why this binding setup isn't working.

I have a Page object with an id and name, I have a pendingBatchDocument with a batchDocumentId observable and a pages observableArray. In my viewmodel, I'm trying to initialize an observable array with PendingBatchDocument's and initialize those PendingBatchDocuments with their array of Pages.

The syntax isn't giving me any errors so I assume the setup there is OK. Let me know if it isn't right.

My question is, why isn't the binding on the second foreach working?

View

<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

Michael Best · Accepted Answer · 2013-07-03 01:48:37Z

2

The context inside the foreach binding is individual array element, which means inside foreach: pendingDocs, you already have the access to PendingBatchDocument instance, so you could use its pages property directly:

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

edited Jul 3, 2013 at 1:48

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

answered Jul 2, 2013 at 22:06

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding elements to observableArray within observableArray

View

Javascript View Model

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

View

Javascript View Model

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

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related