我可以在没有 Ender 的情况下将 qwery 与 bean 一起使用吗？答案

【问题标题】：Can I use qwery with bean without Ender?我可以在没有 Ender 的情况下将 qwery 与 bean 一起使用吗？
【发布时间】：2013-10-29 17:03:28
【问题描述】：

我刚刚开始尝试使用微型库而不是使用 jQuery，我想将 qwery 与 bean 一起使用。如果我设置bean.setSelectorEngine(qwery); 为什么以下不起作用？

bean.on('.masthead', 'click', function () {
    console.log('click fired');
});

我也在使用 bonzo 作为 DOM 实用程序，所以我将它设置为使用美元和 qwery，这样我就可以以类似 jQuery 的方式选择元素：例如$('.masthead').

function $(selector) {
    return bonzo(qwery(selector));
}

这也行不通。我应该不能将以下内容与 bean 一起使用吗？

bean.on($('.masthead'), 'click', function () {
    console.log('click fired');
});

也许我错过了 bean 文档中的一些重要内容。我需要做些什么来解决这个问题？

另外，如果可能的话，我会尽量避免使用 Ender，我会尽量减少我的外部库。

【问题讨论】：

标签： javascript dom jquery-events ender

【解决方案1】：

是的，你可以在没有 Ender 的情况下一起使用所有这些库。但是你必须自己连接这些库之间的所有连接。

这应该让你开始：

// make Bean and Bonzo use Qwery 
// as their internal selector engine 
bean.setSelectorEngine(qwery);
bonzo.setQueryEngine(qwery);

// to use $ instead of bonzo
function $(selector, root) {
    return bonzo(qwery(selector, root));
};

// $() will return a bonzo object
// so if you want to be able to use 
// bean's methods on the bonzo object 
// like $().on()
// you are going to have to extend bonzo
bonzo.aug({
  on: function (eventName, callback) {
    return this.each(function (elem) {
        return bean.on(elem, eventName, callback);
    });
  },

  // do the same for bean's other methods (fire, off, etc)
});

// now you should be able to do this:
$('.masthead').on('click', function () {
    console.log('click fired');
});

希望对您有所帮助！ :)

【讨论】：

非常感谢@Johnny，我现在就试试这个

【解决方案2】：

为了插话，我采用了上面@Johnny 的示例，并使其更通用一点，因为我遇到了同样的问题。这个例子是在 CoffeeScript + Underscore-Contrib 中，但总体思路是你不需要手动包装每个 Bean 函数，你可以通过操作参数在循环中完成：

  # Setup Qwery/Bonzo
  window.$ = (selector, root) ->
    bonzo qwery(selector, root)

  # Glue Bean event handling into Bonzo/Qwery
  events =
    clone : ->
      args = _.toArray arguments
      bean.clone.apply null, args

  _.each ['on','one','off','fire'], (ev) ->
    events[ev] = ->
      args = _.toArray arguments
      this.each (elem) ->
        bean[ev].apply null, _.cons(elem, args)

  bonzo.aug events

希望它对未来的人有所帮助。

【讨论】：