maxmert/maxmertkit

Как передать данные в modal?

staticdreams opened this issue · 11 comments

Максим, приветветсвую. Спасибо за maxmertkit. Выбрал его для персонального проекта вместо всяких bootstrap и прочих.

Пытаюсь использовать modal вместо подтверждающего окошка для удаления данных. Как мне в modal передать данные? наприемер id или целую модель которую я сношу? (использую Ember JS). Нужно отследить нажатие кнопки в самом модале и удалить если подтвердили.

Спасибо

З.Ы: Надеюсь разработка не остановилась? а то уже обновлений не было с самого начала года.

Привет! Я не Максим, но постараюсь натолкнуть на мысль. Попробуй использовать callback'и самого modal. Например в beforeOpen добавить вычитку данных, в кнопку внутри modal добавить переопределение callback'а close возможностью удалить или оставить вычитанный обьект в зависимости от нажатой кнопки.

ДаЛяГуардо, спасибо за ответ!
У меня есть полуработающий вариант. но к сожалению он работает только когда я удаляю одну запись. потом генерируется ошибка. Мне б конкретный пример. Вот что у меня пока выходит. Работащий вариант без подтверждения :

App.TubeController = Ember.ObjectController.extend({
   delete: function() {
        var item = that.get('model');
        item.deleteRecord();
        that.get('store').commit();

        $.notify(item.get('title')+' successfully deleted!', {
          header: 'Confirmation',
          theme: 'primary',
          type: 4000
        })
    });
   } 
})

А вот вариант где я попробовал прикрутить modal.. и вот тут начинает не очень работать. Плюс мне так и не удалось заставить работать ни один callback. они все молчат.

App.TubeController = Ember.ObjectController.extend({

delete: function() {

    var that = this;
    var modal = $('.js-modal').data('kit-modal');
    modal.open();

    $('.confirm-delete').on('click', function(e){

        var item = that.get('model');
        item.deleteRecord();
        that.get('store').commit();

        $.notify(item.get('title')+' successfully deleted!', {
          header: 'Confirmation',
          theme: 'primary',
          type: 4000
        })

        $('.js-modal').data('kit-modal').close();
    });

}
})

Можно попробовать вот так, проверить к сожалению не могу, нет опыта с emberjs, но callback'и вызываются

App.TubeController = Ember.ObjectController.extend({

  delete: function() {

    var that = this;
    var modal = $('.js-modal').modal({
      animation: 'dropIn',
      theme: 'primary',
      beforeOpen: function(){
        var item = that.get('model')
        this.data('kit-modal').options.beforeClose = function(item){
          item.deleteRecord()
          that.get('store').commit()

          $.notify(item.get('title')+' successfully deleted!', {
            header: 'Confirmation',
            theme: 'primary',
            type: 4000
          })
        }
      }
    }).data('kit-modal')
    modal.open();

    $('.confirm-delete').on('click', function(e){
        $('.js-modal').data('kit-modal').close();
    });
  }
})

Да и еще момент - если есть желание избавиться от ужасов в виде:var that = thisрекомендую пользовать underscore.js для определения контекста. Это самый простой в интеграции вариант.

Спасибо за подсказку.
Тем неменее item теряется сразу this.data('kit-modal').options.beforeClose = function(item){ . Т.е до он известен, а после - undefined ..

Это моя ошибка, дико извиняюсь. Правильно так - this.data('kit-modal').options.beforeClose = function(){ Просто не нужно ничего передавать в callback beforeClose.

Спасибо! гораздо лучше работает. Удаляется! Проблема теперь в том что любое действие приводит к удалению записи. Даже маленький крестик в правом углу модала.. :)

просто добавь проверку на то что .confirm-delete была нажата, я бы так сделал:

$('.confirm-delete').on('click', function(e){
    $(this).data('clicked', true);
    $('.js-modal').data('kit-modal').close();
});
this.data('kit-modal').options.beforeClose = function(){
    if ($('.confirm-delete').data('clicked')) {
        item.deleteRecord()
        that.get('store').commit()

        $.notify(item.get('title')+' successfully deleted!', {
            header: 'Confirmation',
            theme: 'primary',
            type: 4000
        })   
    };
}

Нужно было сделать еще $(this).data('clicked', false); сразу после закрытия модала, чтоб другие не удалялись, потому что после первого раза clicked на true заклинивает и все заработало!

Спасибо большое! Очень помог!

Господа, огромное спасибо, что справились. Меня совсем забегали на основной работе + готовлю новый релиз. Еще раз благодарю!

Спасибо! Ждем обновлений!