3

1 つの要素の CSS プロパティを保持するモデルを作成する必要があります。私のモデルは次のようになります。

StyleModel = Backbone.Model.extend( {
    defaults : {
        productName : '',
        styles:{
            'font-weight':'normal',
            'font-style':'normal',
            'text-decoration':'none',
            'visibility':'visible'
            'color':'blue',
            'border-width':'1px',
            'border-color':'white',
            'font-color':'white'
        }
    },
    initialize : function(property, values) {}
...}

一部のプロパティの値を変更したり、リストから削除したりするときにビューに通知するにはどうすればよいですか? (たとえば、ユーザーがborder-widthを3pxに設定した場合、またはfont-weightを削除した場合。または、ハッシュにプロパティを保持せず、すべてのプロパティがモデルの要素になるように設定する方が良い解決策ですか?)

4

2 に答える 2

7

バックボーンは、それ自体でハッシュの設定を認識しません。ただし、これを処理するメソッドを作成できます。


Backbone.Model.extend({
  setCss: function(key, value){
    var css = this.get("styles");
    css[key] = value;
    this.trigger("change", this, key, value);
    this.trigger("change:css", key, value);
    this.trigger("change:css:" + key, value);
  }
});

次に、電話をかけるmodel.setCss("background-color", "#ff0faf")と、ビューでバインドする3つの「変更」イベントがトリガーされます。

ビューでは、初期化子で変更イベントをバインドし、jQueryにビューが制御するDOM要素にすべてのスタイルを適用させることができます。


Backbone.View.extend({
  initialize: function(){
    this.model.on("change:css", this.setCss, this);
  },

  setCss: function(){
    var css = this.model.get("styles");
    this.$el.setCss(css);
  }
});

削除されたものを確実に取り除くために、新しいセットを適用する前に既存のcssをクリアする必要がある場合があります。deleteCssただし、モデルにメソッドを設定し、モデルcss:deletedからイベントを発生させ、問題のcss属性を削除してビューがそのイベントに応答するようにすることをお勧めします。

于 2012-04-20T11:44:10.467 に答える
1

モデルhttp://documentcloud.github.com/backbone/#Model-changeで利用可能な変更イベントを使用します

ビューをイベントにバインドします。http://documentcloud.github.com/backbone/#Events-on

于 2012-04-20T11:36:51.193 に答える