Question

使用jQuery UI Widget工厂模式（1.8），在鼠标事件中我无法找到widget对象：

$.widget('foo.myWidget', {
  _create: function() {
    var $container = this.element.wrap('<div class="ui-widget" />').parent(); // Create a widget container
    $container.append('<div class="myWidgetControl" />'); // Add some clickable thing
    $container.find('.myWidgetControl').on('mouseup.myWidget', this._handleClick); // Watch the mouse event
  },
  options: { // Widget factory options object
    secretKey: 'foobar'
  },
  _handleClick: function(e) {
    // User clicked on ".myWidgetControl"
    // this == DOM element .myWidgetControl
    // e == the jQuery event object

    // I need to get options.secretKey; how do I find it?!?
  }
});

在上面的例子中，我如何获得“secretKey”选项参数？鉴于页面上可能存在此窗口小部件的多个实例，如何为用户单击的控件元素获取正确的实例？

'widget'方法added in 1.8看起来可能是一个解决方案，但它需要知道用户最初将小部件应用到哪个元素：

$("#myDiv").myWidget("widget");

在这种情况下，您如何找出用户最初设置为此窗口小部件实例的选择器（示例中为“#myDiv”）？

Answer 1

在this blog post找到了一个解决方案（请打开这个问题，看看是否有更好的方法）：

作为小部件开发人员，我知道容器元素是什么;因此，使用jQuery Data cache保存对窗口小部件的引用，以便稍后找到它：

_create: function() {
  /* existing code */
  var $container = this.element.wrap('<div class="ui-widget" />').parent();
  $container.data('widget', this); // Save for later
},
_handleClick: function(e) {
  var $container = $(this).parentsUntil('.ui-widget').parent(); // Traverse the tree to find the root element I saved the data for
  var widget = $container.data('widget');
  alert(widget.options.secretKey); // Success! (Don't actually display your secretKey in an alert...)
}

jQuery UI小部件鼠标事件获取Widget状态？

1 个答案: