Не щелкайте дважды, чтобы начать редактирование логической ячейки (флажка) в Backgrid.

Мы используем Backgrid и обнаружили, что, чтобы начать редактирование «логической» ячейки (флажка) в Backgrid, вы должны щелкнуть дважды: первый щелчок игнорируется и не переключает состояние флажка. В идеале мы должны добраться до корня того, что вызывает такое поведение (например, вызывается preventDefault) и решить его там, но сначала я попробовал другой подход со следующим расширением метода BooleanCell enterEditMode, который казался логичным местом, поскольку он при входе в режим редактирования щелчок по флажку игнорировался.

Проблема в том, что моя попытка также переключает состояние ранее отредактированного флажка. Вот код.

var BooleanCell = Backgrid.BooleanCell.extend({
    /*
    * see https://github.com/wyuenho/backgrid/issues/557
    */
    enterEditMode: function () {
        Backgrid.BooleanCell.prototype.enterEditMode.apply(this, arguments);
        var checkbox = this.$('input');
        checkbox.prop('checked', !checkbox.prop('checked'));
    }
});

javascript backbone.js backgrid
person Dexygen    schedule 06.02.2015    source источник
comment
При ближайшем рассмотрении что-то происходит с размытием предыдущего флажка, из-за чего он сначала переключается. Я зарегистрировал $this.('input'), и он правильно возвращает один элемент. Думаю, мне нужно добраться до первопричины, а не накладывать повязку.   -  person Dexygen    schedule 06.02.2015

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, работает следующее:

var BooleanCell = Backgrid.BooleanCell.extend({
    editor: Backgrid.BooleanCellEditor.extend({
        render: function () {
            var model = this.model;
            var columnName = this.column.get("name");
            var val = this.formatter.fromRaw(model.get(columnName), model);

            /*
             * Toggle checked property since a click is what triggered enterEditMode
            */
            this.$el.prop("checked", !val);
            model.set(columnName, !val);

            return this;
        }
    })
});

Это связано с тем, что метод рендеринга вызывается методом backgrid.BooleanCell enterEditMode при щелчке, и указанный метод уничтожает и воссоздает флажок следующим образом, но при этом теряет проверенное состояние (после щелчка) исходного «нередактируемого». режим" флажок

  this.$el.empty();
  this.$el.append(this.currentEditor.$el);
  this.currentEditor.render();
person Dexygen    schedule 09.02.2015

arrow_upward
1
arrow_downward

Более простой подход:

var OneClickBooleanCell = Backgrid.BooleanCell.extend({
  events: {
    'change input': function(e) {
      this.model.set(this.column.get('name'), e.target.checked);
    },
  },
});

Это полностью обходит механизм CellEditor и просто реагирует на событие ввода в флажке, обновляя модель.

person ArthurDenture    schedule 23.09.2016