バックボーンjs-json応答がドメインブックでラップされている場合、コレクションオブジェクトのフィールドをレンダリングできません

イェッペ

以下のjsonデータが受信されると、ビューとhtmlコードがhtmlページで値を正しくレンダリングします。

JSONデータ

[{"id":"1234","name":"book1","type":"catg1"},{"id":"1235","name":"book2","type":"catg1"},
        {"id":"1236","name":"book3","type":"catg1"},
        {"id":"1237","name":"book4","type":"catg1"},
        {"id":"1238","name":"book5","type":"catg1"}]

コレクションとモデル

var books= Backbone.Collection.extend({
      url: '/books'
    });

    var Book= Backbone.Model.extend({
      urlRoot: '/books'
    });

見る

var bookListView = Backbone.View.extend({
          el: '.page',
          render: function () {
            var that = this;
            var books= new Books();
            books.fetch({
              success: function (banks) {
                var template = _.template($('#book-list-template').html(), {books: books.models});
                that.$el.html(template);
              }
            })
          }
        });

上記のテンプレットを使用してレンダリングされたHTML

 <% _.each(books, function(book) { %>
          <tr>
            <td><%= htmlEncode(book.get('id')) %></td>
            <td><%= htmlEncode(book.get('name')) %></td>
            <td><%= htmlEncode(book.get('type')) %></td>

        <% }); %>

しかし、私は以下のJson応答で同様のことを行うためにさまざまなアプローチを試みましたが、失敗しました。Json DATAが次のようになったら、ロジックで何を変更すればよいか説明できますか?

    {"book":[{"id":"1234","name":"book1","type":"catg1"},
{"id":"1235","name":"book2","type":"catg1"},
    {"id":"1236","name":"book3","type":"catg1"},
    {"id":"1237","name":"book4","type":"catg1"},
    {"id":"1238","name":"book5","type":"catg1"}]}
アレックスR

バックボーンコレクションは、デフォルトで、.fetch呼び出しの応答で配列を想定しています。したがって、JSON構造に変更すると、最初にデータを解析する必要があります。parseコレクション関数をオーバーライドすると、問題が解決するはずです。詳細については、http://backbonejs.org/#Collection-parse参照してください。

var Book = Backbone.Model.extend({});
var books= Backbone.Collection.extend({
  url: '/books',
  model: Book,
  parse: function(data) {
    return data.book;
  }
});

その解析関数内に収まると思われるエラー/解析を追加できます。応答タイプはBookJSONの配列である必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ