magento2 javascript組件開發

建立jQuery UI Widget

requirejs-config.js

var config = {
    map: {
        '*': {
            'widgetDemo':  'Vendor_Module/js/widgetDemo'
        }
    }
};

// <div data-mage-init='{"widgetDemo":{var1:1, var2:2}}'></div>
define([
    'jquery',
    'jquery/ui'
], function ($){
    $.widget('mage.widgetDemo', {
        options: {var1:0},
        _create: function () {
            // 生成HTML，綁定事件
        },
        _init: function () {
            // 當前元素
            this.element;
            // 參數
            this.options;
        }
    });

    return $.mage.widgetDemo;
});

建議使用data-role給widget中各元素定位，例如widget須要把結果生成到指定的span元素內，那麼結果容器元素能夠這樣寫<span data-role="result"></span>

調用方法

<div data-mage-init='{"widgetDemo":{"var1":"1", "var2":"2"}}'></div>

或

<script type="text/x-magento-init">
{
    "*": {
        "widgetDemo": {"var1":"1", "var2":"2"}
    }
}
</script>

Knockout 組件建立

[Inchoo_Js]/view/frontend/web/js/koexample.js

// <Inchoo_Js>/view/frontend/web/js/koexample.js
define(['ko', 'uiComponent'], function(ko, Component) {
    return Component.extend({
        defaults: {
            firstname: 'william',
            lastname: 'wen',
            fullname: ''
        },

        initialize: function () {
            var self = this;
            this._super();
            // 定義observe對象，與ko.observable()同樣
            this.observe([
                'firstname',
                'lastname'
            ]);
            // ko以observe對象同步數據，ko.computed()把多個observe結果包裝成一個observe，實現複雜的數據同步
            this.fullname = ko.computed(function(){
                return self.firstname()+' '+self.lastname();
            });
            console.log(this.param1);
        },
        
        getCount: function() {
            var cart = customerData.get('cart');
            return cart().summary_count;
        }
    });
});

(any).phtml

<div data-bind="scope: 'koexample'">
<!-- 直接在phtml裏輸出值 -->
<!-- ko text: firstname --><!-- /ko -->
<!-- ko text: lastname --><!-- /ko -->
<!-- ko text: fullname --><!-- /ko -->
<!-- ko text: getCount() --><!-- /ko -->

<!-- 調用模板 -->
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
 
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "koexample": {
                        "component": "Inchoo_Js/js/koexample",//<Inchoo_Js>/view/frontend/web/template/example.html
                        "template" : "Inchoo_Js/example",
                        "param1" : "hello world!"
                    }
                }
            }
        }
    }
</script>

經常使用的Knockoutjs語法

<!-- ko i18n: 'Items in Cart' --><!-- /ko -->
<!-- ko text: getTotals() --><!-- /ko -->
<!-- ko if: getItemsQty() > 1 -->
<!-- /ko -->
<!-- ko foreach: getItems() -->
<li class="product-item">
    <div class="product">
        <!-- ko foreach: $parent.elems() -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>
</li>
<!-- /ko -->

參考

• http://devdocs.magento.com/gu...

• http://inchoo.net/magento-2/k...