骨干选项选择适用于Firefox，但不适用于Chrome

Question

我使用Backbone处理选择框中选项的点击。出于某种原因，它可以在Firefox中使用，但不能在Chrome中使用。

这不是“using local files in Chrome”问题，因为它全部在我的服务器上运行。

在下面的代码片段中，FieldView表示选择列表中的单个<选项>。在Firefox中，单击任何选项将运行clicked()函数。在Chrome中，当我点击任何选项时，似乎没有任何事情发生。

var FieldView = Backbone.View.extend({ 
    tagName: "option", 

    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 
    events: { 
     "click": "clicked" 
    }, 
    clicked: function (e) { 
     var a_display_name = this.model.get("display_name"); 
     var console_out = "selected " + a_display_name 
     console.log(console_out); 
     $("#fake_console").html(console_out); 

    }, 
    render: function() { 
     this.$el.attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name')); 
     return this; 
    } 
}); 

http://jsfiddle.net/thunderrabbit/QXAAW/3/

我如何能得到这个在Chrome中工作？

Answer 1

您应该改变，jQuery docs使用。

要访问FieldsView的集合模型，你应该得到的选择的选项的索引事件添加到FieldsView：

events: {'change': 'optionChanged'}, 
optionChanged: function() { 
    var index = this.$el.children('option:selected').index(); 
    var model = this.collection.at(index); // this is the model of the option view 
} 

Answer 2

这里是一个更新的jsfiddle：http://jsfiddle.net/phoenecke/QXAAW/4/

的change事件连接到<select>元素。然后您可以使用<select>的值查找模型。另外，我将idAttribute: 'COLUMN_NAME'添加到模型中，假设它是唯一的ID。

 events: { 
      "change": "changed" 
     }, 
     changed: function (e) { 
      // the select's val is the value of the selected option 
      var id = this.$el.val(); 
      // find model in the collection 
      var model = this.collection.get(id); 
      var a_display_name = model.get("display_name"); 
      var console_out = "selected " + a_display_name 
      console.log(console_out); 
      $("#fake_console").html(console_out); 

     },