1

JSON形式でブログ投稿の配列を正常に返すWebAPIがあります。

[{"ID":1,"Title":"First Blog Post","Body":"Some Content"},{"ID":2,"Title":"Second BlogPost","Body":"Some other content"}]

演習のために、Knockout.jsを使用してすべての投稿をリストに表示したいと思います。

これが私のコードです：

<script>
$(document).ready(function () {

    function AppViewModel() {
        var self = this;

        self.posts = ko.observableArray([
        { Title: 'Default Title', Body: 'Default Body' },
        ]);

        $.getJSON('api/posts', function (data) {
            ko.mapping.fromJSON(data, {}, self.posts);
        });

    }

    ko.applyBindings(new AppViewModel());

});

私のバインディング：

<tbody data-bind="foreach: posts">
                <tr>
                    <td data-bind="text: Title"></td>
                    <td data-bind="text: Body"></td>
                </tr>
</tbody>

私のテーブルは空で表示されますが、何らかの理由でJSONデータが表示されていません...

答え： JSONからfromJSに変更する必要がありましたが、機能します。みなさん、ありがとうございました

4

2 に答える 2

0

返されるjsonには大文字と小文字のプロパティ名がありますが、self.postsの元のjsonには小文字のプロパティ名があります。テンプレートの小文字バージョンにバインドしていると思います。小文字に戻されたjsonも変更することを検討してください。

于 2012-08-18T21:52:00.613 に答える
0

あなたの場合、マッピングの更新ターゲットを指定する必要があります。

Knockout Mappingプラグインのドキュメントから：

上記の例のように、クラス内でマッピングを実行している場合は、これをマッピング操作のターゲットとして使用します。ko.mapping.fromJSの3番目のパラメーターは、ターゲットを示します。例えば、

ko.mapping.fromJS(data, {}, someObject);

だからあなたの場合：

$.getJSON('api/posts', function (data) {
        ko.mapping.fromJSON(data, {}, self.posts);
    });

動作中のJSFiddle

また、プロパティ名では大文字と小文字が区別され、JSONとビューモデルおよびバインディングで一致する必要があることに注意してください。たとえば、取得"Title"しますが、使用していますtitle

于 2012-08-18T21:55:28.747 に答える