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

Question

如何连接更改模型中的某些字段以反映视图？ 我有模型，其中包含font-weight，我在视图中有该模型，但是如何连接模型中提交的 font-weight 的更改以反映来自视图的 el ？ / p>

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的更改。

您可以查看working jsFiddle code for the approachs 1. and 2.

Answer 2

试试这个：

var Font = {};

Font.Model = Backbone.Model.extend({

    defaults: {
        font_family: 'Arial, Helvetica, sans-serif',
        font_size:   12,
        font_weight: 'normal'
    }
});

Font.View = Backbone.View.extend({

    initialize: function() {

        var this_view = this;

        this.model.bind('change:font_weight', function(model) {

            // Do something with this_view.el
            alert('handle the font-weight change');

        });
    }
});

var myFontModel = new Font.Model();

var myFontView = new Font.View({
    model: myFontModel
});

myFontModel.set({font_weight: 'bold'});