로드 방법 Backbone View에서 모델 모음을로드 하시겠습니까?

Question

나는 Backbone.js을 배우려고하고 있는데, 이제는 모델 모음을보기에로드하려고합니다. 내가 지금 TICKETID에 속하는 메시지의 컬렉션을로드하려면이 tempalte에서

<script type="text/template" id="tab-content-template"> 
    <div class="conversation-window" id="conversation<%= ticketId %>"></div> 
</script> 

: 창에 탭을 열면, 내가 먼저 다음과 같은 템플릿을 추가합니다.

var MessageCollection = Backbone.Collection.extend({ 
    url: 'ticket/:id/messages' 
}); 

및 전망 :

var MessageView = Backbone.View.extend({ 
    initialize: function(models, options) { 
     this.ticketId = options.ticketId; 
    }, 
    el: function() { 
     return '#conversation' + this.ticketId; 
    }, 
    className: 'user-message' 
}); 

그래서 내가 메시지의 목록 (TICKETID 1의 경우) #의 conversation1 내에 삽입 할 그래서 이런 컬렉션을했다. 나는 다음이 실행 시도 :

var messageView = new MessageView(messageCollection, {ticketId: 1}); 
messageView.render(); 
console.log(messageView); 

불행하게도 아무 일도 발생하지 않고, 내가 콘솔로 볼 때 나는 ticketId: 1하지만 el: undefined 것을 알 수있다. 나는 내가 잘못하고있는 일에서 다소 잃어 버렸습니다. (일반적으로 백본에서 다소 손실되었습니다.)

내가 아는 사람이 누구인지 여기에서 잘못 알고 어떻게 해결할 수 있습니까? 모든 팁을 환영합니다!

Answer 1

나는 이것이 당신이 원하는 생각 : 나는 당신이 통과 볼 않지만

<div id = "conversation1">stuff insert here</div> 
<script> 
    var MessageCollection = Backbone.Collection.extend({ 
    // url: 'ticket/:id/messages' //<-- put this in router 
    }); 

    // you need to create an instance of you collection somewhere and pass in 
    // models as parameter. note that your ticketId is included in the models: 
    var messageCollection = new MessageCollection([{ticketId:1,attr:'stuff1'}, {ticketId:2,attr:'stuff1'}]) 


    var MessageView = Backbone.View.extend({ 
    initialize: function(models, options) { 
     this.ticketId_1 = this.collection.models[0].get('ticketId'); 
     this.ticketId_2 = this.collection.models[1].get('ticketId'); 
    }, 
    // can not reference el and define a <div id="user-message"> simultaneously 
    /* 
    el: function() { 
     return '#conversation' + this.ticketId; 
    }, 
    */ 
    className: 'user-message', 
    render: function() { 
     $('#conversation'+ this.ticketId_1).html(this.$el.html('stuff from model goes in here')); 
    } 
}); 

// var messageView = new MessageView(messageCollection, {ticketId: 1}); 
// the above wouldn't work. your ticketId should be passed into your view via model 
// then you associate you view to your collection like so: 
var messageView = new MessageView({ collection: messageCollection }); 
messageView.render(); 
console.log(messageView.$el.html()); 

</script>