jquery - AJAX 内容更新后在 Magento 2 中刷新 jquery 和淘汰赛绑定和观察者

Question

我们的代码必须通过 AJAX 更新整个标题块。

标题块包含 minicart 和响应式菜单切换按钮。我们有一个迷你车的下拉图标。

更新发生后，我们面临一些挑战：

• Minicart 计算为空
• 响应式菜单切换按钮不起作用
• 下拉图标不起作用

minicart 是这样定义的：

<div class="block block-minicart empty"
    data-role="dropdownDialog"
    data-mage-init='{"dropdownDialog":{
    "appendTo":"[data-block=minicart]",
    "triggerTarget":".showcart",
    "timeout": "2000",
    "closeOnMouseLeave": false,
    "closeOnEscape": true,
    "triggerClass":"active",
    "parentClass":"active",
    "buttons":[]}}'
>
    <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
</div>

和切换按钮：

<span data-action="toggle-nav" class="action nav-toggle">
    <span>
        Toggle Nav
    </span>
</span>

更新后，我们实现了刷新 minicart 内容：

document.addEventListener("headerupdated", function() {
    let block = $('header.page-header');
    ko.cleanNode(block[0]);
    block.applyBindings();
});

但是我们没有让它工作的切换按钮和下拉图标。

我们认为这是两个不同的问题：切换按钮是从 jQuery ( toggleBtn: $('[data-action="toggle-nav"]'),) 中准备的：

lib/mage/menu.js


define([
    'jquery',
    'matchMedia',
    'jquery/ui',
    'jquery/jquery.mobile.custom',
    'mage/translate'
], function ($, mediaCheck) {
    'use strict';

    $.widget('mage.menu', $.ui.menu, {

        ...

        _create: function () { ... },

        _init: function () {
            ...
            this._assignControls()._listen();
            ...
        },

        _assignControls: function () {
            this.controls = {
                toggleBtn: $('[data-action="toggle-nav"]'),
                swipeArea: $('.nav-sections')
            };

            return this;
        },

...

和下拉图标：

app/design/frontend/Vendor/theme/Magento_Checkout/templates/cart/minicart.phtml

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'sidebar',
    'mage/translate',
    'mage/dropdown'
], function (Component, customerData, $, ko, _) {
    'use strict';
    ...

    // [No more references to mage/dropdown]

和（实现options和_create中的triggerTarget，这将等于".showcart"）

lib/web/mage/dropdown.js

define([
    'jquery',
    'jquery/ui',
    'mage/translate'
], function ($) {
    'use strict';

    $.widget('mage.dropdownDialog', $.ui.dialog, {
        options: {
            triggerEvent: 'click',
            triggerClass: null,
            triggerTarget: null,
            ...

        ...

        _create: function () {
            if (_self.options.triggerTarget) {
                $(_self.options.triggerTarget).on(_self.options.triggerEvent, function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    ...
                });
            }

        },

有没有比绑定和初始化事件和观察者更简单的方法或最佳实践来重新绑定、重新初始化、初始化 js 进程？

我们甚至尝试取消定义并再次要求一些 requirejs 定义，但没有成功。

标签： jqueryknockout.jsmagento2pjax