0

我开始学习一些 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([]);
}

主题.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定义了属性的对象。

我在这里做错了什么？

4

1 回答 1

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/

于 2012-08-05T00:43:41.523 回答