如何连接更改模型中的某些字段以反映视图？

Question

如何连接更改模型中的某些字段以反映视图？我有模型,其中包含字体权重,我在视图中有该模型,但如何连接模型中字体权重的变化以反映视图中的el？

Answer 1

有几种方法可以在这里应用,取决于你想要多少精致.

1.在模型改变的任何时候重新渲染整个视图

initialize: function(){
  this.model.on( "change", this.render, this );
}

2.更精确,只重新渲染所需的东西

initialize: function(){
  this.model.on( "change:title", this.renderTitle, this );
  this.model.on( "change:body", this.renderBody, this );
  this.model.on( "change:fontWeight", this.renderFontWeight, this );
}

这需要最小的渲染方法公司,以外科医生的身份修改DOM:

renderTitle: function(){
  this.$el.find( "h1" ).html( this.model.get( "title" ) );  
},

renderBody: function(){
  this.$el.find( "p" ).html( this.model.get( "body" ) );  
},

renderFontWeight: function(){
  this.$el.find( "p" ).css( "font-weight", this.model.get( "fontWeight" ) );
}

3.对模型的每个部分使用子视图

我没有提供这种方法的任何示例,因为实现可能更复杂.只要认为你的实际View是实例化几个SubViews,一个用于title,另一个用于body,等等.每个都有自己的render并绑定其具体Model属性的变化以及re-render何时属性发生变化.

您可以检查方法1和2的工作jsFiddle代码.