Magento 2: What is the proper format for a javascript widget's _bind() method?

Question

Using 2.1.3, I've been trying to bind page elements to internal javascript widget methods, and have been unsuccessful - the docs (http://devdocs.magento.com/guides/v2.0/coding-standards/code-standard-jquery-widgets.html) use the following format:

_bind: function() {
 this._on({
 'click [data-role="menu-item"]:has([data-role="link"])': this._selectItem
 });
}

but within vendor/magento/module-customer/view/adminhtml/web/edit/tab/js/addresses.js, there is another format:

_bind: function () {
 this._on(this.element.find(this.options.addAddressButtonSelector), {
 'click': '_addNewAddress'
 });
}

Is there a preferred format? Neither has been working for me yet.

Update:

This format is working for me (from vendor/magento/theme-adminhtml-backend/web/js/theme.js):

Declare target DOM elements in _create():

_create: function () {
 var selectors = this.options.selectors;
 this.menu = this.element;
 this.menuLinks = $(selectors.topLevelHref, selectors.topLevelItem);
 this.closeActions = $(selectors.closeSubmenuBtn);
 this._initOverlay()
 ._bind();
 },

Then bind widget functions to those elements in _bind():

_bind: function () {
 var focus = this._focus.bind(this),
 open = this._open.bind(this),
 blur = this._blur.bind(this),
 keyboard = this._keyboard.bind(this);
 this.menuLinks
 .on('focus', focus)
 .on('click', open);
 this.menuLinks.last().on('blur', blur);
 this.closeActions.on('keydown', keyboard);
 },

I'd still love to know the preferred/best practice format...

Answer 1

We need to make widgets reusable and agile.

All DOM selectors used by a widget must be passed to the widget as options

I think, that second example looks better, according best practices and Magento documentation.

To use variables as the selectors in first example we need to use concatenation of string

_bind: function() {
 this._on({
 'click ' + this.options.selector: handler
 });
}

i think, that this is ugly in comparing with

_bind: function () {
 this._on(this.element.find(this.options.selector), {
 click: handler
 });
}