문제

아래와 같은 답변 목록이 있습니다.

enter image description here

각 목록 항목은 백본 모델입니다.

{
  title: 'answer title...',
  content: 'answer content...',
  voteStatus: 'up'
}

찬성 또는 반대 투표를 클릭하면 모델의 voteStatus 변경될 예정이며, 이 답변 항목은 다시 렌더링됩니다.

답변 내용에 그림이 있으면 그림도 다시 렌더링되지만 이는 내가 원하는 것이 아닙니다.

방금 변경했는데 어떻게 투표 버튼을 다시 렌더링할 수 있나요? voteStatus?

도움이 되었습니까?

해결책

내부에 하위 뷰가 있습니다. AnswerView 이는 투표 화살표를 렌더링하는 역할만 담당하며, VotingArrowsView.이 하위 뷰를 내부에서 초기화합니다. initialize 기능 AnswerView 그런 다음 하위 뷰 앞에 추가 el 상위 뷰에 el 언제 render상위 뷰를 보는 중:

var AnswerView = Backbone.View.extend({
  initialize: function(options){
    this.template = _.template($('#answerTmpl').html());
    this.votingArrowsView = new VotingArrowsView({ model: this.model });
    ...
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.prepend(this.votingArrowsView.render().el);
    return this;
  },
  ...
});

var VotingArrowsView = Backbone.View.extend({
  initialize: function(options){
    this.template = _.template($('#votingArrowsTmpl').html());
    this.listenTo(this.model, 'change:voteStatus', this.render);
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top