Backbone.js:View或Collection有属性吗?

时间:2012-01-06 14:41:13

标签: backbone.js

让我们说我有一个男孩和女孩名单。这个名称集合也有一个“性别”属性。

我想在Collection或View上放置一个'SelectedGender'属性,这样我只有在Selected gender更改时才会触发自定义事件。

是否可以将视图扩展为具有触发更改事件的属性?

可以将集合扩展为具有触发更改事件的属性吗?

或者我是否被迫创建另一个包含集合的模型?我实际上并没有代码,我只是在考虑设计。

2 个答案:

答案 0 :(得分:4)

回答你的问题:可以扩展视图或集合以具有触发更改事件的属性,答案是否定,是的。

不,您不能view.set({attr: value})collection.set({attr: value})

但是,您可以通过扩展Backbone.Events来获取视图或集合触发事件。

YourView = Backbone.View.extend({});
_.extend(YourView, Backbone.Events);

var view = new YourView();
view.bind('SelectedGenderChanged', function() {
  console.log('SelectedGenderChanged event fired!');
});

//somewhere else in your code
view.trigger('SelectedGenderChanged');

然而,可能有更好的方法来设计它。

如果用户从组合框中进行选择时所选性别发生更改,则您可以在视图中订阅组合框更改事件,然后让您的视图进行当时需要完成的任何更改。

答案 1 :(得分:1)

我认为您不需要为集合创建包装模型。只需创建一个存储名称和性别的模型。然后,就像@Paul提到的那样,您可以订阅集合或视图中的change事件。

var nameModel = Backbone.Model.extend({
  defaults : function() {
    return {
      name   : "Andy",
      gender : "male"
    };
  }
} );

var nameCollection = Backbone.Collection.extend( {
  initialize : function ( args ) {
    var self = this;
    self.model.bind( "change:gender", function () {
      self.changeGender( self.model.get( "gender" ) );
    } );
  },

  changeGender : function( gender ) {
    // modify your collection somehow
  }
} );

var nameView = Backbone.View.extend( {
  initialize : function( args ) {
    var self = this;
    self.model.bind( "change:gender", function () {
      self.changeGender( self.model.get( "gender" ) );
    } );
    // in case you have a checkbox or something you want to bind the model change to:
    self.$( ".genderCheckbox" ).bind( "change", function( ev ) {
      self.model.set( { gender, self.$( ".genderCheckbox" ).val() } );
    } );
  },

  changeGender : function( gender ) {
     // Modify your view here
  }
} );

修改

为什么不使用一个只返回男孩名字的方法和一个只返回女孩名字的方法,而不是根据名字的性别设置两个单独的集合?

即:

getMaleNames : function() {
  return this.filter( function( name ) {
    return name.get( 'gender' ) == "male";
  } );
}