knockout.js의 중첩 루프

Question

MVVM 패턴이 .Net에서 MVVM에 대한 경험이있는 사람에게 친숙하기 때문에 일부 웹 프로그래밍을 배우기 시작했고 knockout.js를 선택했습니다.

하지만 중첩 된 배열로 루프를 만드는 데 문제가 있습니다. 이 모델은 매우 간단합니다. 각각의 스토리 배열을 가진 주제 배열이 있습니다.

ViewModel.js :

현재 Fiddle에 전체 코드를 확인할 수 있지만,이 단순화 된 버전입니다

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 안에 셀을 포함하지 않는 요소를 넣으면 브라우저가 외부 뷰 모델에 바인딩되는 외부에서 편리하게 이동할 수 있습니다. http://jsfiddle.net/rniemeyer/QCY4r/1/