Question

考虑以下代码。如果我在“选择视图”中创建更改事件处理程序，那么获取选项视图的所选模型的最简洁和最佳方法是什么，而无需在选项视图中指定data-cid属性。我试图将真相排除在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中侦听click事件，然后在侦听器中执行类似的操作：

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

这会触发模型中的事件，并将模型作为参数传递给自身（以了解已选择的愿望）。模型中触发的事件将传播到其集合中。

然后在CollectionView中听取：

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

当你在触发器中传递它时，SelectedHandler将接收所选模型作为参数。

更新：添加示例代码。基本上，由于DOM元素选项本身并不触发DOM事件，我们添加了一个＆＃34;插件＆＃34;在select 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'); 
 }
});

在Backbone的选项视图中获取所选模型的最佳方法

1 个答案: