Question

How to connect changes some field in model to reflect on view ?
I have model which holds font-weight and I have that model in view, but how to connect changes of font-weight filed in model to reflect on el from view ?

Answer 1

There are several approachs that can be applied here on depending that how much delicate you want to be.

1. re-render the whole View any time the Model change

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

2. be more precise and only re-render what is needed

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 );
}

This needs the company of minimal render methods that modify the DOM as a surgeon:

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. use subviews for every part of the Model

I’m not offering any example for this approach because the implementation can be more complex. Just think that your actual View is instantiating several SubViews, one for the title, other for the body, and so on. Each one with its own render and binding the changes in its concrete Model attribute and re-render when the attribute changes.

You can check working jsFiddle code for the approachs 1. and 2.