2

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

这不是“在 Chrome 中使用本地文件”问题，因为这一切都在我的服务器上运行。

在下面的代码片段中，FieldView代表选择列表中的单个 <option>。在 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 中工作？

4

2 回答 2

1

您应该在更改时使用jQuery 文档。

要访问 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
}
于 2013-03-07T04:21:05.113 回答
1

这是 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);

        },
于 2013-03-07T04:41:37.667 回答