マリオネットのItemViewでコレクションをレンダリングするには？

Question

私はAPI（JSON）からの応答をBackbone.Marionette.ItemViewでレンダリングしようとしています。それがなぜ機能していないのか分かりません。

私はmarionette v2.4.7（目的）を使用しています。ここで

は、ハンドルバーのテンプレートです：ここで

<script id="feed-post" type="text/x-handlebars-template"> 
    {{#each posts}} 
    <a href="#"><img src="{{author.image_url}}" alt=""></a> 
    <a href="#"><p>{{author.name}}</p></a> 
    <span>TODO TIMESTAMP</span> 
    <p>{{body}}</br>{{topic_type}}</p> 
    {{/each}} 
</script> 

は私の完全なapp.js（このファイル内のすべてのバックボーン・ロジック）です。

// Model 
var Post = Backbone.Model.extend({ 
    defaults: { 
    authorPic:  'Unknown', 
    authorName:  'Unknown', 
    timestamp:  'Unknown', 
    body:   'Not available', 
    comments:  '0' 
    } 
}); 

// Collection 
var Posts = Backbone.Collection.extend({ 
    model: Post, 
    url: 'http://localhost:4321/blogposts', 
    initialize: function(){ 
    this.fetch(); 
    } 
}); 

// View 
var PostView = Marionette.ItemView.extend({ 
    el: '#content', 
    template: Handlebars.compile($("#feed-post").html()), 
}); 

//Config 
var chunkPosts = new Posts(); 
var myview = new PostView({collection: chunkPosts}); 

また、私はconsole.logを試してみました。モデルがそこにあるように見えました。

Answer 1

この回答は、マリオネットのv2.4.7に合わせて調整されます。 LayoutViewとItemViewがマージされ、に戻ってViewに名前が変更されました。使用するテンプレートのため にitems配列にsomeCollectionコレクションを変換します。このビューをレンダリング

：doc on ItemViewから

---

。

itemsと書かれているが、あなたのテンプレートにはpostsが使用されています。

参考として、ここではItemView sourceでそれをやって正確なコードがあります：

// Serialize the model or collection for the view. If a model is 
// found, the view's `serializeModel` is called. If a collection is found, 
// each model in the collection is serialized by calling 
// the view's `serializeCollection` and put into an `items` array in 
// the resulting data. If both are found, defaults to the model. 
// You can override the `serializeData` method in your own view definition, 
// to provide custom serialization for your view's data. 
serializeData: function() { 
    if (!this.model && !this.collection) { 
    return {}; 
    } 

    var args = [this.model || this.collection]; 
    if (arguments.length) { 
    args.push.apply(args, arguments); 
    } 

    if (this.model) { 
    return this.serializeModel.apply(this, args); 
    } else { 
    return { 
     items: this.serializeCollection.apply(this, args) 
    }; 
    } 
}, 

最後の行が表示され、そのコレクション、属性のみが返されるようitemsを持つ新しいオブジェクトのために。

serializeData関数more information and examples are available in the docを無効にすることができます。

---

あなたはまだビューにrenderを呼び出す必要があり、コレクションのfetchは非同期であるため、リスナーを配線する必要がありますので、あなたは、ボックスの外にアイテムを持っていません。

まず、コレクションのinitializeをフェッチせずに、他のユースケースではコレクションをほとんど役に立たなくします。

var Posts = Backbone.Collection.extend({ 
    model: Post, 
    url: 'http://localhost:4321/blogposts', 
}); 

コレクションsyncイベントをリッスンし、代わりにビュー内でフェッチします。

var PostView = Marionette.ItemView.extend({ 
    el: '#content', 
    template: Handlebars.compile($('#feed-post').html()), 
    initialize: function() { 
    this.listenTo(this.collection, 'sync', this.render); 
    this.collection.fetch(); 
    }, 
}); 

マリオネットでもcollectionEventsを提供しています：

var PostView = Marionette.ItemView.extend({ 
    // ...snip... 
    collectionEvents: { 
    "sync": "render" 
    } 
    // ...snip... 
});