服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > magento教程 >

magento2如何引入jquery chosen

时间:2017-02-27 01:17来源:未知 作者:最模板 点击:
magento2有两种主要JS插件封装形式,widget和knockout。而大多数情况下,外部引入的plugin都应该实现这两种封装,才能在magento2中完整地利用,主要是因为knockout template不能使用widget,即那些

magento2有两种主要JS插件封装形式,widget和knockout。而大多数情况下,外部引入的plugin都应该实现这两种封装,才能在magento2中完整地利用,主要是因为knockout template不能使用widget,即那些.html文件。

假设你已经了解这些:https://segmentfault.com/a/11...

不解释requirejs-config.js部分,假定已引入chosen并命名为“jquery.chosen”,以下是widget的代码:

define([
    'jquery',
    'jquery/ui',
    'jquery.chosen'
], function ($){
    $.widget('mage.jqchosen', {
        options: {
            disable_search_threshold: 999,
            width: '100%'
        },
        _init: function () {
            var _self = this;
            if(this.tagName == 'SELECT') {
                $(this.element).chosen(this.options);
            }
            $(this.element).find('select').each(function() {
                var _hidden = $(this).is(':hidden');
                $(this).chosen(_self.options);
                if(_hidden) {
                    var _id = $(this).attr('id')+"_chosen";
                    $("#"+_id).hide();
                }
            });
        }
    });

    return $.mage.jqchosen;
});

将可以用以下代码使用chosen

<div data-mage-init='{"jqchosen":{}}'>
    <select>
        <option>...</option>
    </select>
</div>

以下是knockout形式的插件:

define(['jquery','ko','jquery.chosen'], function($, ko) {
    ko.bindingHandlers.chosen = {
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            if(!$(element).data('__chosen_loaded')) {
                if(element.tagName == 'SELECT') {
                    $(element).chosen({
                        disable_search_threshold: 999,
                        width:'100%'
                    });
                    $(element).data('__chosen_loaded', true);
                }
            }
        }
    };
});

只能应用在knockout组件(假设在requirejs-config.js命名为“knockout-chosen”):

// app/code/Vendor/Module/view/frontend/web/js/ko_example.js
define(['ko', 'uiComponent', 'knockout-chosen'], function(ko, Component) {
    return Component.extend({});
});
 
<div data-bind="scope: 'koexample'">
    <select data-bind="{chosen:true}">
        <option>...</option>
    </select>
</div>
 
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "koexample": {
                        "component": "Vendor_Module/js/ko_example"
                    }
                }
            }
        }
    }
</script>
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容