以下の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"}]}
バックボーンコレクションは、デフォルトで、.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]
コメントを追加