다른 렌더링 메서드를 호출하여 백본에서 하위 뷰 렌더링

Question

두 개의 템플릿이 있는데 하나는 부모 템플릿이고 다른 하나는 하위 뷰가있는 템플릿입니다. 첫 번째 상위 뷰는 백본의 뷰를 확장하고 렌더링 방법은 다음과 같습니다.

render: function() { 
    this.$el.append(templates["template-parent-test"](this.model)); 
    return this; 
} 

이 상위 뷰에는 버튼이 있습니다. 바로 버튼을 사용하여 내보기를 채 웁니다. 그것은 기본적으로이 작업을 수행합니다

populateView: function() { 
    // create some dummy test data to match the web service 
    _.each(myModel, function (theModel) { 
     var testView = new childView({ model: theModel }); 
     this.$('div-in-parent-view').append(testView.render().$el); 
    }); 
    } 

이 백본보기는 Backbone.View 확장과 같은 그 방법을 렌더링 보이는 :

render: function() { 
     console.log("rendering child view"); 
     this.$el.html(this.template({ data: this.model.toJSON() })); 

     return this; 
    } 

그래서이 작동합니다. 그러나 단추 누르기에 대한 부모보기를 채우고 싶지 않습니다. 나는 그것을 처음으로 보여줄 때 그것을 채우고 버튼이 실제로 그것을하기로되어있는 것을하게하려고합니다. 나는 단지 this.populateView()를 부모 뷰의 내 렌더링 함수에서 호출 할 수 있다고 생각하지만 실제로 렌더링 된 것은 아무것도 없다. 그러나 만약 내가 this.populateView() 내 단추 이벤트에서 렌더링 할 가져옵니다. 왜 여기에 차이점이 있습니까? 감사.

Answer 1

this을 third parameter to each으로 추가하십시오. 그것은 문맥을 설정합니다. 컨텍스트를 지정하지 않으면 this은 window이됩니다. 그리고 html이 부모보기의 render 동안 아직 페이지에 없기 때문에 html을 추가하려면 this.$('#div-in-parent-view')을 찾지 못할 것입니다.