백본이

Question

내 탐색 및 레이아웃 관리를위한 라우터를 사용하고

을 다시 칠되지 않는 DIV와 히트에게 문제를 갖고있는 것 같다 (!? 바로이 때문이다) :

backboneQuote.Routers.ApplicationRouter = Backbone.Router.extend({ 

routes: { 
    "" : "home", 
    "edit/:id": "quoteEdit" 
}, 

initialize: function(){ 
    this.headerView = new backboneQuote.Views.headerView(); 
    $('.header').html(this.headerView.render().el); 

    if(!this.itemsView){ 
     this.items = new backboneQuote.Collections.ApplicationCollection([ 
      {id: 1, name: "item 1"}, 
      {id: 2, name: "item 2"}, 
      {id: 3, name: "item 3"} 
     ]); 

     this.itemsView = new backboneQuote.Views.itemsView({collection: this.items}); 
    } 
    this.content = $('.container'); 
}, 

home: function(){ 

    this.content.html(this.itemsView.render()); 

}, 

quoteEdit: function(id){ 
    this.editQuoteView = new backboneQuote.Views.editQuoteView({model: this.items.where({id: parseInt(id, 10)})}); 
    $('#editQuote').html(this.editQuoteView.render().el); 
    this.content.html($('#editQuote').html()); 
} 

을});

renderItem: function(model){ 
    var itemView = new backboneQuote.Views.itemView({model: model}); 
    itemView.render(); 
    $(this.el).append(itemView.el); 
    return this; 
}, 

render: function(){ 
    this.collection.each(this.renderItem); 
}, 

내가 (클릭 이벤트가 벌금을 발사한다) "홈"기능을 다시 응용 프로그램을 탐색 요소를 클릭하지만 "this.itemsView"의 내용을 결코 :

내 itemsView 물건 렌더링 "this.content"div에 넣는 것 같습니다. 아무도 여기에 뭔가 잘못 알아들을 수 있습니까?

또 다른 방대한 도움으로 누군가가 여기에서 볼 수있는 것에 대한 전반적인 BackboneJS 지혜를 제공 할 수 있다면 거대한 도움이 될 것입니다.

Answer 1

일반적으로 Backbone 응용 프로그램에서는 의 내용을 설정하는 render 메서드를 작성합니다. el이 올바른 위치에 표시되도록하려면 render을 호출하는 것은 코드의 책임입니다. 라우터에서

,

home: function(){ 

    this.content.html(this.itemsView.render()); 

}, 

당신은 .el 속성에 액세스하지 않습니다. 첫 번째 수정은 거기에 추가하는 것입니다.

home: function(){ 

    this.itemsView.render(); 
    this.content.html(this.itemsView.el); 

}, 

는이 컬렉션 뷰는 기본적으로 백본 전망을 가지고하는 경향이 el 속성을 가지고 있다고 가정합니다.

이것이 일반적인 작업이라고 생각하면, 각보기 render 메서드 끝에 this을 반환하는 것이 관례입니다.

render: function(){ 
    this.collection.each(this.renderItem); 
    return this; 
}, 

home: function(){ 
    this.content.html(this.itemsView.render().el); 
},