无法覆盖magento 2中的collapsible.js

我正在使用Magento EE 2.1.1，并且我需要扩展位于lib/web/mage/collapsible.js中的activate方法功能。但我不能找到Magento的文档和谷歌搜索的正确方法，所以这里是我的尝试，什么是对每个问题：无法覆盖magento 2中的collapsible.js

尝试1：
- 创建以下文件：

namespace_module_dir /视图/前端/网络/ JS /可折叠mixin.js

define([ 
    'jquery' 
], function ($) { 
    'use strict'; 
    var mixin = { 
     activate: function() { 
      if (!this.options.disabled) { 
       if (this.options.animate) { 
        this._animate(showProps); 
       } else { 

// my custom code goes here ... 
        this.content.show(); 
       } 
       this._open(); 
      } 
     } 
    }; 

    return function (target) { 
     return target.extend(mixin); 
    }; 

});

创建requirejs-config文件

namespace_module_dir /视图/前端/ requirejs-config.js

var config = { 
    config: { 
     mixins: { 
      'mage/collapsible': { 
       '<namespace_module>/js/collapsible-mixin': true 
      } 
     } 
    } 
};

的问题是：

尝试2：

创建requirejs-config文件

namespace_module_dir /视图/frontend/requirejs-config.js

var config = { 
    map: { 
     '*': { 
      collapsible: '<namespace_module>/js/collapsible-map' 
     } 
    } 
};

问题是： 不管是什么collapsible-map.js的内容，它没有得到加载（创建可折叠map.js文件），甚至以为我可以看到我在自动requirejs-config.js内容生成requirejs-config.js文件由magento和defalut magento collapsible.js文件加载。

尝试3：

创建以下文件：

namespace_module_dir /视图/前端/网络/ JS /可折叠地图。JS

define([ 
    'jquery', 
    'jquery/ui', 
    'mage/collapsible' 
], function ($) { 
    "use strict"; 
    $.widget('<namespace_module>.collapsible', $.mage.collapsible, { 
     activate: function() { 
      if (!this.options.disabled) { 
       if (this.options.animate) { 
        this._animate(showProps); 
       } else { 

        // custome code goes here ... 

        this.content.show(); 
       } 
       this._open(); 
      } 
     } 
    }); 
    return $.ctv.collapsible; 
});

创建requirejs-config文件

namespace_module_dir /视图/前端/ requirejs-config.js

var config = { 
     map: { 
      '*': { 
       'mage/collapsible': '<namespace_module>/js/collapsible-mixin' 
      } 
     } 
    };

问题是：

在那里进行调试发现typeof $.mage.collapsible = undefined

所以请告诉我，我错过了什么，什么是遵循的最佳途径？ :(

感谢inadvance ...

来源

2016-11-21 rramiii

要解决您的尝试3，在地图上改变 '法师/可折叠' 只是 '折叠'：

var config = { map: { '*': { 'collapsible': '<namespace_module>/js/collapsible-map' } } };

我猜想该错误是由循环引用引起的：collapsible-map.js引用了mage/collapsible，而mage/collapsible再次映射到collapsible-map。别名'collapsible'用于mage/collapsible，它在Theme \ view中配置\ frontend \ requirejs-config.js。所以你可以重新映射这个别名到哟你自己的文件，同时引用真正的法师/可折叠在您的文件。

尝试1和2错误，因为mixins只能应用于UI组件。这意味着组件必须从uiClass，uiElement，uiCollection或任何其他ui组件扩展。 collapsible.js只是jQuery小部件。

一些有用的链接：

Exteding组件或控件（这是不一样的！）：http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html

jQuery的小部件： https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

来源

2016-11-22 12:04:12 ma1ao

mage.collapsible是jQueryUI的小部件。欲了解更多信息，请参阅JqueryUi的文档。我宁愿这样做，而不是从核心Magento 2代码复制JS文件到主题和修改函数，或者只是用我的替换小部件，但只添加一个函数。

这应该工作，在[我的主题DIR] /web/mage/my-collapsible-mixin.js：

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

    return function(target) { 
     $.widget("mage.myCollapsible", target, { 
      activate: function() { 
       if (!this.options.disabled) { 
        if (this.options.animate) { 
         this._animate(showProps); 
        } else { 
         // custom code goes here ... 
         this.content.show(); 
        } 
        this._open(); 
       } 

       // Or: 
       // this._super(); 
       // if (!this.options.disabled) { .. custom code .. } 
      } 
     }); 
    }; 
});

附加建议&未测试：代替上面 '目标' 变量 '这个' 。

而且在要求-config.js从[我的主题DIR]：

var config = { 
    config: { 
     mixins: { 
      'mage/collapsible': { 
       'mage/my-collapsible-mixin': true 
      } 
     } 
    } 
};

来源

2017-05-13 14:08:54 obscure

无法覆盖magento 2中的collapsible.js

回答

相关问题