2

バックボーンを使用して、選択ボックス内のオプションのクリックを処理しています。何らかの理由で、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

変更時に使用する必要があります、jQuerydocs。

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 に答える