Backgrid.jsでmultipleなSelect2CellEditorを使う際の注意

Backgrid.jsでmultipleなSelect2Cellを使って

表 > プルダウンにする > 適当に選択 > 表に戻す > プルダウンにする

の操作をした時、適当に選択した内容がクリアされてしまいました。たぶん、ビューの生成と破棄を繰り返す関係なんだと思います。

幸いにも、適当に選択した内容は、対応するモデルの中には残っていたので、以下のようにして対応出来ました。

var MyEditor = Backgrid.Extension.Select2CellEditor.extend({
    render: function () {
        Backgrid.SelectCellEditor.prototype.render.apply(this, arguments);

        _.each(this.model.get('labels'), function(labelId) {
            this.$el.find('option').each(function() {
                if ($(this).val() == labelId) {
                    $(this).attr('selected', true);
                }
            });
        }, this);

        this.$el.select2(this.select2Options);
        this.delegateEvents();

        return this;
    }

});

* ボイントは this.$el.select2() を呼び出す前にselected属性を付けることです。

var MyCell = Backgrid.Extension.Select2Cell.extend({
    editor: MyEditor,
    multiple: true,
    optionValues: labels
});

* Backgrid.Extension.Select2Cellを拡張したCellに、前述のMyEditorをセットします。

このMyCellを、カラムのcell値で指定する感じです。