javascript - Skipping levels of context binding -

i doing knockout.js tutorial (tutorial: single page applications, step 2) , have problems understand 1 thing. maybe code first:

view:

<!-- folders --> <ul class="folders" data-bind="foreach: folders">     <li data-bind="text: $data,                     css: { selected: $data == $root.chosenfolderid() },                    click: $root.gotofolder"></li> </ul>  <!-- mails grid --> <table class="mails" data-bind="with: chosenfolderdata">     <thead><tr><th>from</th><th>to</th><th>subject</th><th>date</th></tr></thead>     <tbody data-bind="foreach: mails">         <tr>             <td data-bind="text: from"></td>             <td data-bind="text: to"></td>             <td data-bind="text: subject"></td>             <td data-bind="text: date"></td>         </tr>          </tbody> </table> 

viemodel:

function webmailviewmodel() {     // data     var self = this;     self.folders = ['inbox', 'archive', 'sent', 'spam'];     self.chosenfolderid = ko.observable();     self.chosenfolderdata = ko.observable();      // behaviours         self.gotofolder = function(folder) {          self.chosenfolderid(folder);         $.get('/mail', { folder: folder }, self.chosenfolderdata);     };      // show inbox default     self.gotofolder('inbox'); };  ko.applybindings(new webmailviewmodel()); 

above snippets of code working , list of emails shown. question is: how can iterate on mails when rid of data-bind="with: chosenfolderdata" in table tag ? tried change data-bind="foreach: mails" data-bind="foreach: chosenfolderdata().mails" didn't work. strange because able data of first mail via:

data-bind="text: chosenfolderdata().mails[0].to"

this ajax response:

object {id: "inbox", mails: array[12]} 

anyone?