magento2 引入第三方javascript plugin： 如何在checkout加入jquery chosen？

magento2有兩種主要JS插件封裝形式，jQuery UI Widget和Knockout。而大多數狀況下，外部引入的javascript plugin都應該實現這兩種封裝，才能在magento2中完整地利用，主要是由於knockout template不能使用widget，即那些.html文件。checkout page用的是knockout，因此若是要在該頁面加入jquery plugin，knockout方式必須實現。

假設你已經瞭解這些：https://segmentfault.com/a/11...

不解釋requirejs-config.js部分，假定已引入chosen並命名爲「jquery.chosen」，如下是jQuery UI 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 = {
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            if(element.tagName == 'SELECT') {
                $(element).chosen({
                    disable_search_threshold: 999,
                    width:'100%'
                });
            }
        }
    };
});

若是select非手動修改了狀態，chosen會由於獲取不到event因此不會同步更新，只須要執行jQuery('#id').trigger('chosen:updated');

關於ko如何增長plugin可參考：http://knockoutjs.com/documen...

要把plugin應用到ko組件上，就須要在ko組件的主體加載plugin，因爲全部ko組件都來源於Magento_Ui/js/core/app，因此我決定重寫這個js，讓它加載個人plugin（假設在requirejs-config.js命名爲「knockout-chosen」）

// app/design/frontend/<vendor>/<theme>/Magento_Ui/web/js/core/app.js
define([
    './renderer/types',
    './renderer/layout',
    '../lib/knockout/bootstrap',
    'knockout-chosen' // 新增的plugin
], function (types, layout) {
    'use strict';

    types.set(data.types);
    layout(data.components, undefined, true, merge);
});

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