backbone.js - 在 Backbone 的选项 View 中获取所选模型的最佳方法

Question

考虑下面的代码。如果我在选择 View 中创建一个更改事件处理程序，那么在不分配选项 View 中的 data-cid 属性的情况下获取选项 View 的选定模型的最干净和最好的方法是什么。我试图将真相排除在 dom 之外，并按照 Backbone 方式执行此操作:

var ItemView = Backbone.View.extend({
tagName: 'option',
initialize:function(){        
    this.template= _.template($('#menu_item_view').html());    
},    
render:function(){        
    this.$el.html(this.template(this.model.toJSON()));        
    return this;        
}
});

var CollectionView = Backbone.View.extend({
  tagName: 'select',
  initialize:function(){        
    this.collection = new ItemCollection();            
    this.collection.on('sync',this.render,this);            
    this.collection.fetch();
 },    
 render:function(){        
    this.$el.html(this.collection.map(function( item ){            
        return new ItemView ({model:item}).render().el;        
    },this);      
    return this;        
 }
});

Answer 1

你是对的，你不应该在 DOM 中使用任何东西。

解决这个问题的想法很简单，在 ItemView 监听点击事件，然后在监听器中做类似的事情:

this.model.trigger('selected', this.model);

这会触发模型中的一个事件，并将模型作为参数传递给模型本身(知道希望已被选中)。在模型中触发的事件被传播到它的集合。

然后在 CollectionView 中监听:

this.collection.on('selected', this.selectedHandler, this); 

SelectedHandler 将接收所选模型作为参数，因为您在触发器中传递了它。

更新:添加示例代码。基本上，由于 DOM 元素选项本身不会触发 DOM 事件，因此我们在选择 DOM 元素中添加了一个“插件”来完成它。

var ItemView = Backbone.View.extend({
  tagName: 'option',
  events : {
    'option_changed' : 'optionChangedHandler'
  },
  initialize:function(){        
    this.template= _.template($('#menu_item_view').html());    
  },    
  render:function(){        
    this.$el.html(this.template(this.model.toJSON()));        
    return this;        
  },
  optionChangedHandler : function(){
    this.model.trigger('selected', this.model);
  }
});

var CollectionView = Backbone.View.extend({
  tagName: 'select',
  events : {
    'change' : 'changeHandler'
  },
  initialize:function(){        
    this.collection = new ItemCollection();            
    this.collection.on('sync',this.render,this);    
    this.collection.on('selected',this.selectedModel, this);            
    this.collection.fetch();
 },    
 render:function(){        
    this.$el.html(this.collection.map(function( item ){            
        return new ItemView ({model:item}).render().el;        
    },this);      
    return this;        
 },
 selectedModel : function(model){
    console.log('it is magic: ', model);
 },
 changeHandler : function(){
   this.$("option:selected").trigger('option_changed'); 
 }
});