마리오네트의 ItemView로 컬렉션을 렌더링하는 방법은 무엇입니까?

Question

Backbone.Marionette.ItemView으로 API (JSON)의 응답을 렌더링하려고합니다. 왜 작동하지 않는지 확실하지 않습니다.

나는 (목적으로) 마리오 네트 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으로 다시 바뀌 었습니다 (v3.0.0). 사용하는 템플릿에 대한 에 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... 
});