在jQuery UI Widget上绑定内部事件侦听器

Question

TLDR;

我试图以与外部处理程序相同的方式绑定，就在jQuery UI Widget的内部。

详细信息

为了触发/收听大型/可插入jQuery UI Widget中的事件，我试图使用widget元素bind和widget {{{}; {{ 1}}，但似乎无法正确连线。

以下代码来自窗口小部件中的coffeescript类，该类具有对它的后引用：

_trigger

以下内容无效：

  bind: (type, fn) ->
    ### bind a callback through the widget's element ###

    # this doesn't work
    @widget.element.bind("#{@widget.widgetEventPrefix}#{type}", fn)

    # this doesn't work either
    @widget.element.bind(type, fn)

原因

我绑定了错误的元素。我注意到@widget._trigger('foo') 与用作窗口小部件外部的引用的元素不同，例如@widget.element！== @widget.element

摘要

外部侦听器通过$('#bar').myWidget()

以相同方式绑定/侦听没有问题

我尝试以与外部处理程序相同的方式绑定，只是在窗口小部件的内部。

问题???

我应该如何在小部件内部进行绑定，以便内部和外部侦听器都正确连接？

Answer 1

我最终想出了这一点，并且很简单，因为错过了使用bind收听的处理程序全部小写的事实。

所以这里是我在内部组件基类中使用的代码示例，允许组件bind和unbind对着顶级jQuery UI Widget，允许我使用面向事件的体系结构在窗口小部件内外使用相同的事件：

class Base

  constructor: (@widget) ->

  _fullyQualifiedEventName: (type) ->
    fullyQualifiedName = "#{@widget.widgetEventPrefix}#{type}".toLowerCase()
    fullyQualifiedName  

  bind: (type, fn) ->
    ### bind a callback through the widget's element ###
    fullyQualifiedName = @_fullyQualifiedEventName(type)

    @widget.element.bind(fullyQualifiedName, fn)

    console.log "bind(#{fullyQualifiedName}, #{fn.name})"

  unbind: (type, fn) ->
    ### unbind a callback from the widget's element ###
    fullyQualifiedName = @_fullyQualifiedEventName(type)

    @widget.element.unbind(fullyQualifiedName, fn)

    console.log "unbind(#{fullyQualifiedName}, #{fn.name})"

内部的处理程序是绑定到foo的{​​{1}}事件，还是外部的@bind('foo', fn)，或者是通过实例化$('#bar').myWidget().bind('mywidgetfoo', fn)中的选项传递给处理程序的，现在将使用{foo: () -> console.log 'options foo listener fired'}

触发所有听众