Knockout.js中的嵌套循環

Question

我開始學習一些網絡編程，並選擇了knockout.js，因爲MVVM模式對於我熟悉MV.NET中的.Net有一些經驗。

但我有一些麻煩，使嵌套數組循環。這個模型非常簡單：我有一組主題，每個主題都有一組故事。

您可以檢查Fiddle完整的代碼，但這裏是一個簡化的版本：

ViewModel.js：

function Story(t, u, v) { 
    var self = this; 

    self.summary = ko.observable(t); 
    self.url = ko.observable(u); 
    self.up_votes = ko.observable(v); 
} 

function Topic(t) { 
    var self = this; 

    self.title = ko.observable(t); 
    self.stories = ko.observableArray(); 
} 

function TopicListViewModel() { 
    var self = this; 
    self.topics = ko.observableArray([]); 
} 

topic.html：

<!-- ko foreach: topics --> 
<div class="span2"> 
    <table cellpadding="2" cellspacing="2" style="width:100%" class="table"> 
     <thead> 
      <tr> 
       <th> 
        <span data-bind="text: title"> </span> 
       </th> 
      </tr> 
     </thead> 

     <tbody data-bind="foreach: $data.stories"> 
      <tr> 
       <!--<a data-bind="attrib: { href: url, title: summary} "></a>--> 
       <span data-bind="text: summary"> </span> 
      </tr> 
     </tbody> 

    </table> 
</div> 
<!-- /ko -->​ 

我把問題得到的是故事循環。我一直在收到Message: ReferenceError: summary is not defined;，但我調試了Chrome中的代碼，故事確實是一個定義屬性summary的對象數組。

我在這裏做錯了什麼？

Answer 1

當您將元素放入不在單元格內的tr中時，瀏覽器將會方便地將它們移動到外部，以便與整個視圖模型相對應。

所以，你只需要確保你的元素是細胞內，如：

<tr> 
    <td> 
     <a data-bind="attrib: { href: url, title: summary} "></a> 
     <span data-bind="text: summary"> </span> 
    </td> 
</tr> 

這裏是更新了自己的提琴：http://jsfiddle.net/rniemeyer/QCY4r/1/