Question

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

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

在下面的代码段中，FieldView表示单个＆lt;选项＆gt;在选择列表中。在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);

        },

backbone选项适用于Firefox，但不适用于Chrome

2 个答案: