2

接続方法は、モデルの一部のフィールドを変更してビューに反映しますか？フォントの太さを保持するモデルがあり、そのモデルが表示されていますが、モデルにファイルされたフォントの太さの変更を接続して、ビューからelに反映させるにはどうすればよいですか？

4

2 に答える 2

6

どれだけ繊細になりたいかに応じて、ここで適用できるいくつかのアプローチがあります。

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.モデルのすべての部分にサブビューを使用します

実装がより複雑になる可能性があるため、このアプローチの例は示していません。実際には、1つは、、もう1つは、など、Viewいくつかをインスタンス化していると考えてください。それぞれが独自のバインディングを持ち、具体的な属性の変更と、属性が変更されたときをバインドします。SubViewstitlebodyrenderModelre-render

アプローチ1および2の動作中のjsFiddleコードを確認できます。

于 2012-04-24T11:52:41.660 に答える
1

これを試して：

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'});
于 2012-04-24T10:34:43.777 に答える