Knockout foreach在綁定內部綁定（數組內的數組）

Question

我有兩個類;用戶和閱讀。這涉及到醫療到每個用戶具有讀數的數組：

/* 
* Reading class 
* containts health readings 
*/ 
function Reading(date,weight,glucose) 
{ 
    var self = this; 

    self.date=ko.observable(date); 
    self.weight=ko.observable(weight); 
    self.glucose=ko.observable(glucose); 

     self.formattedWeight = ko.computed(function(){ 
     var formatted = self.weight(); 

     return formatted+" lb" 
    }); 
} 

/* 
* User class 
* contains a user name, date, and an array or readings 
*/ 
function User(name,date,readings) { 
    var self = this; 

    self.name = name; 
    self.date = date; 
    self.readingsArray = ko.observableArray([ 
     new Reading(99,99) 
    ]); 
} 

我知道如何使用foreach結合以顯示讀取或用戶的信息。但我不知道如何顯示用戶內的讀數？

有沒有辦法使用嵌套的foreach綁定或綁定？這裏是我的html：

<h2>Users (<span data-bind="text: users().length"></span>)</h2> 

<table> 
    <thead><tr> 
     <th>User name</th><th>Date</th></th> 
    </tr></thead> 
    <!-- Todo: Generate table body --> 
     <tbody data-bind="foreach: users"> 
    <tr> 
     <td><input data-bind="value: name" /></td> 
     <td><input data-bind="value: date" /></td> 
     <td data-bind="text: readingsArray"></td> 
     <td><a href="#" data-bind="click: $root.removeUser">Remove</a></td>    
    </tr> 
    </tbody> 
</table> 

<button data-bind="click: addUser">Add User</button> 

<h2>Readings (<span data-bind="text: readings().length"></span>)</h2> 
    <table> 
    <thead><tr> 
     <th>Date</th><th>Weight</th><th>Glucose</th> 
    </tr></thead> 
    <!-- Todo: Generate table body --> 
     <tbody data-bind="foreach: readings"> 
    <tr> 
     <td strong data-bind="text: date"></td> 
     <td strong data-bind="text: formattedWeight"></td> 
     <td strong data-bind="text: glucose"></td> 
    </tr> 
    </tbody> 
</table> 

，這裏是我的模型，如果有人有興趣。任何幫助將不勝感激！提前致謝！

// Overall viewmodel for this screen, along with initial state 
function userHealthModel() { 
    var self = this; 
    self.inputWeight = ko.observable(); 
    self.inputDate = ko.observable(); 
    self.inputId = ko.observable(); 
    self.inputGlucose = ko.observable(); 

    // Operations 
    self.addUser = function(){ 
     self.users.push(new User("",0,0,(new Reading(0,0)))); 
    } 
    //adds a readings to the edittable array of readings (not yet the reading array in a user) 
    self.addReading = function(){ 
     var date = self.inputDate(); 
     var weight = self.inputWeight(); 
     var glucose = self.inputGlucose(); 
     if((weight&&date)||(glucose&&date)) 
     { 
      self.readings.push(new Reading(date,weight,glucose)); 
     } 
     else{ 
      alert("Please complete the form!") 
     } 
    } 

    self.removeUser = function(userName){self.users.remove(userName)} 

    //editable data 
    self.readings = ko.observableArray([ 
     new Reading(12,99,3),new Reading(22,33,2), 
     new Reading(44,55,3) 
    ]); 

     self.users = ko.observableArray([ 
     new User("George",2012), 
     new User("Bindu",2012) 
    ]); 

} 

ko.applyBindings(new userHealthModel()); 

Answer 1

我不知道你怎麼想的讀數呈現，但這裏有一個例子：

http://jsfiddle.net/jearles/aZnzg/

你可以簡單地使用其他的foreach開始新的結合上下文，然後渲染您希望的屬性。