1

HTMLファイル内に次のスニペットJQueryがあります。

$.getJSON("/events/", function (data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
});

たとえば、ユーザーがボタンを押して次のようなJSONを返すと、コードが実行されます。

{"Events":[{"Name":"Event1"},{"Name":"Event2"},{"Name":"Event3"}]}

この結果は（KnockoutJSを使用して）次のリンクにリンクされています。

<ul data-bind="foreach: Events">
    <li><span data-bind="text: Name"></span></li>
</ul>

への最初の呼び出しですべてが正常に機能し$.GetJSONます。私は欲しいものを手に入れます、それは（ブラウザ出力）です：

  • イベント1
  • イベント2
  • イベント3

しかし、その後の「$。GetJSON」の呼び出しでは、Firebugで次のエラーが発生します。

NotFoundError: Node was not found.

containerNode.insertBefore(nodeToInsert, insertAfterNode.nextSibling);

そして、私はリストアイテムを取得しません。

私は何を間違っている可能性がありますか？

事前にどうもありがとうございました。

4

2 に答える 2

1

私の友人のThomasBrattliが解決策を見つけました：

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

ありがとう ！

于 2012-09-10T21:28:22.520 に答える
1

Knockoutの全体的なポイントは、ビューとビューモデル間の相互作用を処理することです。この場合、ボタンのクリックに応答してイベントのリストを更新しようとしています。ボタンのクリックはビューモデルの関数にリンクされている必要があり、リストはボタンをクリックすると更新される監視可能な配列にリンクされている必要があります。私はこれをここでフィドルにまとめました：http：//jsfiddle.net/mbest/uZb3e/そして重要な部分は以下にあります：

<button type=button data-bind="click: updateEvents">Update</button>
<ul data-bind="foreach: data.Events">
    <li><span data-bind="text: Name"></span></li>
</ul>

Javascript：

var viewModel = {
    data: ko.mapping.fromJS({"Events":[]}),
    updateEvents: function() {
        var self = this;
        $.getJSON("/events/", function (data) {
            ko.mapping.fromJS(newData, self.data);
        });​
    }
};

ko.applyBindings(viewModel);​
于 2012-09-20T02:21:43.553 に答える