Question

我最近遇到过一种情况，我想在基本级别更改Bootstrap的默认行为。我想在Modal类中添加自定义方法，以便可以像调整任何其他库存Modal方法一样调用自定义方法：

$('#my-modal').modal('myMethod', myParameter);

我通过向Modal的构造函数添加函数来实现此功能：

$.fn.modal.Constructor.prototype.myMethod = function (myParameter) {
  ...
}

但是，myParameter变量未被传递。如何访问/传递myParameter到自定义Bootstrap方法？

Answer 1

你无法按原样这样做。 The code模型用于调用函数不考虑参数;

  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
      if (!data) $this.data('modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option]() // <-- here
      else if (options.show) data.show()
    })
  }

最好的办法是向$.fn添加一个方法，然后通过Model检索$(this).data('modal')实例，因为这是Bootstrap存储实例的地方;

$.fn.foo = function (param) {
    return this.each(function () {
        var model = $(this).data('modal');

        // blah blah blah
    });
}

Answer 2

我找到了一种方法，但不幸的是它涉及对Bootstrap源的更改。执行实际方法调用的代码是：

$.fn.modal = function (option) {
  return this.each(function () {
    var $this = $(this)
      , data = $this.data('modal')
      , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
    if (!data) $this.data('modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option]()
    else if (options.show) data.show()
  })
}

要更改此项，应修改第7行（source code中的第206行）以传递最初传递给封闭函数的任何其他参数。另外，必须在jQuery的.each()函数的每次迭代中给出原始参数。这是工作代码：

$.fn.modal = function (option) {
  return this.each(function () {
    var $this = $(this)
      , data = $this.data('modal')
      , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
    if (!data) $this.data('modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option].apply($this.data('modal'), Array.prototype.slice.call(arguments, 1)); // pass the parameters on
    else if (options.show) data.show()
  }, arguments) // execute each iteration with the original parameters
}

我还在尝试确保此更改不会产生任何不良副作用，但到目前为止，一切都按预期工作。欢迎任何更优雅的解决方案。

将自定义函数添加到Bootstrap.js

2 个答案: