引导4：如何初始化模式包装插件

Question

我已经建立了一个模式包装插件（Bootstrap 4）根据需要动态创建对话框。我能当我初始化它使用每个触发按钮的唯一选择，以创建插件的多个实例。

我想初始化一次，但有独立的情况下，每个发射按钮。问题是，该插件忽略通过对除了第一个所有按钮数据属性设置的选项。无论点击该按钮后，会产生完全相同的模式，它是基于对队列的第一个按钮传递选项。

在这里我的当前设置的精简片断。任何人都可以看到什么我可能会丢失？

下面是一个示例设置：

初始化

$('.open-modal').myModal();

两个样本按钮用于打开模式

// Button 1
<button type="button" class="btn open-modal" data-title="Modal 1" data-target="myModal1" data-remote="test.html">Open modal 1</button>

// Button 2 data attributes are ignored. The Modal always renders with options from button 1
<button type="button" class="btn open-modal" data-title="Modal 2" data-position="right" data-target="myModal2" data-remote="test2.html">Open modal 2</button>

插件

... 

const defaults = {      
      type: 'basic',       
      id: 'myModal' + helper.getRandomInt(9999, 1000),      
      title: window.document.title,    
      position: '', //
      remote: null, // content to be loaded via Ajax
      target: 'myModal', // id of the generated modal
      ...  
};

class Modal {
  constructor(el, options) {            
    this._$el = $(el);
    this._el = el;
    this._options = options;
    this._$el.data(PLUGIN_NAME, this);
    this._metadata = this._$el.data();
    this._defaults = this.getDefaults();           
    this._opts = $.extend(true, {}, this._defaults, this._options, this._metadata);            

  }

  // render modal
  render(event) {    
    let cls = this;              
    let $el = this._$el;
    let _bodyID = cls._opts.bodyID;
    let _type = cls._opts.type;    
    let $tpl = $(cls.buildTemplate());        

    $tpl.appendTo("body").modal({
      show: true,
      backdrop: cls._opts.backdrop,
      keyboard: false
    });

    // show content
    if (_type == 'delete') {        
        var $mdlBodyID = $(_bodyID);
        var $warningContainer = $('<p>');
        $warningContainer.text(cls._opts.content).appendTo($mdlBodyID);        
    } else {
        let basicType = _type || 'basic';
        cls.log(`${basicType} modal launched`);
        $.ajax({
          url: cls._opts.remote,
        }).done(cls.onSuccess).fail(cls.onError);
    }                
    // remove modal from DOM when closed
    $tpl.on(cls._opts.hideEvent, {this: cls}, cls.onHidden);
    ...
  }

  ...

}

// pluign definition

$.fn[PLUGIN_NAME] = function (options) {

  var items = this;
  if (items.length) {
      var bm = new Modal(items, options);      
      return items.each(function(e) {   
        let $item = $(this);    
        $item.on('click', function(event) {                
          event.stopPropagation();
          event.preventDefault();
          bm.render(event.type);
        })        
      });
  }
}

编辑2：代码片段的更加清晰快速的重新排序

Answer 1

它归结为移动$.extend方法给插件定义，each循环内。

  if (items.length) {
      var bm = new Modal(items, options);      
      return items.each(function(e) {   
        let $item = $(this);    
        // override defaults with options or data attributes
        let settings = $.extend(true, {}, defaults, options, $item.data());            
        $item.on('click', function(event) {                
          event.stopPropagation();
          event.preventDefault();
          bm.render(event.type, settings);
        })        
      });
  }

然后，它只是通过这些设置恢复到现在接受第二paramater只是为这一目的render方法的问题。

如果它可以是任何使用人的，这里是编辑的渲染方法：

 // render modal
  render(event, settings) {    
    let cls = this;              
    let $el = this._$el;
    let _bodyID = cls._opts.bodyID;
    let _type = cls._opts.type;    
    let $tpl = $(cls.buildTemplate(settings));        

    $tpl.appendTo("body").modal({
      show: true,
      backdrop: settings.backdrop,
      keyboard: false
    });

    // show content
    if (_type == 'delete') {        
        var $mdlBodyID = $(_bodyID);
        var $warningContainer = $('<p>');
        $warningContainer.text(settings.content).appendTo($mdlBodyID);        
    } else {
        let basicType = _type || 'basic';
        cls.log(`${basicType} modal launched`);
        $.ajax({
          url: settings.remote,
        }).done(cls.onSuccess).fail(cls.onError);
    }                
    // remove modal from DOM when closed
    $tpl.on(settings.hideEvent, {this: cls}, cls.onHidden);
    ...
  }