我开始学习一些web编程,并学习了knockout.js,因为MVVM模式对我来说很熟悉,我在.Net中有一些MVVM的经验。
但是我在使用嵌套数组进行循环时遇到了一些问题。模型非常简单:我有一系列的主题,每个主题都有一系列故事。
你可以在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中调试了代码,stories实际上是一个定义了属性summary
的对象数组。
我在这里做错了什么?
当您将不在单元格内的元素放入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/