Backbone.js：视图或集合可以有属性吗？

Question

假设我有一个男孩和女孩名字的列表。该姓名集合还具有“性别”属性。

我想在集合或视图上放置“SelectedGender”属性，以便仅当所选性别发生更改时才可以触发自定义事件。

可以扩展视图以具有触发更改事件的属性吗？

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

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

Answer 1

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

不，您不能执行 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');

然而，可能有更好的设计方法。

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

Answer 2

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

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

编辑：

与其根据名字的性别拥有 2 个单独的集合，为什么不拥有一个仅返回男孩名字的方法和一个仅返回女孩名字的方法的名字集合呢？

IE：

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