0

MVVMパターンは.NetでMVVMを使用した経験があるのでよく知っているので、私はいくつかのWebプログラミングを学び始めてknockout.jsを取り上げました。

しかし、ネストされた配列でループを作成するのに問題があります。モデルは非常に単純です。トピックの配列があり、それぞれにストーリーの配列があります。

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 -->​

私が抱え続けている問題は、ストーリーのループにあります。私は取得し続けますが、Chromeでコードをデバッグしました。ストーリーは、プロパティが定義されたMessage: ReferenceError: summary is not defined;オブジェクトの配列です。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 に答える