Skip to main content
Tweeted twitter.com/StackMagento/status/817556526848163840
added solution but not answer, updated file path names
Source Link
dbcn
  • 754
  • 2
  • 8
  • 21

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...

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 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.

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...

Source Link
dbcn
  • 754
  • 2
  • 8
  • 21

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

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 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.