Magento 2 knockoutjs语法介绍

7天成为Magento系统架构师,现在开始学习Magento全栈开发!

《Magento2.X企业级开发实战》

Magento2 使用模型-视图-视图模型 (MVVM) 模式管理动态 JavaScript UI
“knockoutjs”,是的,以简单和结构化的方式(HTML 数据绑定)观察和更改数据。 本教程将介绍“虚拟元素” 。
Knockoutjs 使用两种类型的元素 Normal 节点和 Comment 节点“虚拟元素”是在通常的 DOM API 之上的抽象,它理解注释节点的概念,所有这一切的重点是支持无容器模板(例如,< !-- ko foreach:someCollection -->blah)
如果您在 .phtml 文件中播放,您会在任何地方找到 ,但在本教程中我们要分析 。
首先 :
小型全局示例:
在你的任何 html head 标签中包含 Knockout.js 之后:

<div class='topclass' data-bind="template: 'subTmpl'"></div>
<script id="subTmpl" type="text/html">
    <div class="myclass" data-bind="text: 'SomeText'"></div>
</script>

简单这里我告诉用模板填充我的元素,其中 id 是 'subTmpl' 这里简单的结果我的元素(想象渲染不是代码源)它将被填充为:

<div class='topclass'>
<div class="myclass" >SomeText</div>
</div>

前端案例:
1 – 在布局中声明模板
打开 vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml ,你会发现:

<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>

如果您转到顶部的此块 vendor/magento/module-checkout/view/frontend/layout/default.xml 的布局负责“处理程序”,您会发现:

<block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="cart/minicart.phtml">
                <arguments>
                 <argument name="jsLayout" xsi:type="array">
                   <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                            <item name="minicart_content" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>

注意:这里Magento2团队在layout .xml中声明了负责这个组件和模板的js,你可以看到:Magento_Checkout/js/view/minicart equal vendor/magento/module-checkout/view/frontend/web/js/view/ minicart.js 和 Magento_Checkout/minicart/content 等于 vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html 但你可以在负责组件的 js 中添加模板。

如果你去 vendor/magento/module-checkout/view/frontend/cart/minicart.phtm 你可以看到:

<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
        }
    }
    </script>

组件的声明是“Magento_Ui/js/core/app”: getJsLayout();?> ,是的,我们从 xml 和块 Magento\ 中获取内容Checkout\Block\Cart\Sidebar magento 使用 $block->getJsLayout() 转换为 json 格式。

好的,Magento 2 Ui 如何使用 Knockoutjs 和其他实习 js 来获得最终结果。通常,magento2/lib/web/knockoutjs 中包含的标准 Knockoutjs 以及由 magento2 团队创建的用于个性化本机任务和添加其他任务的其他部分位于 vendor/magento/module-ui/view/base/web/js/lib/ ko , Ok Ko 读取虚拟元素 全局 ko 处理并获取指令模板(我们希望通过使用预定义在此元素中绑定数据template) ,这个过程在 Knockoutjs.js 中从第 2555 行到第 2625 行完成,最后你得到: return new Function("$context", "$element", functionBody);

但是 getTemplate() 函数在哪里哇它在里面:magento2/app/code/Magento/Ui/view/base/web/js/lib/core/element/element.js

 getTemplate: function () {
            return this.template;
        },

你可以使用例如 console.log(this.template); 并且您会看到许多带有虚拟元素的 .phtml 中使用的所有模板:
“Magento_Checkout/minicart/content” element.js:256
“Magento_Checkout/minicart/subtotal” element.js:256
“Magento_Checkout/minicart/item/default” element.js:256
“Magento_Tax/checkout/minicart/subtotal/totals” element.js:256
您可以添加组件,并使用它创建与此模板相关的自己的 js 并放置模板。

2 – 在 js 中声明模板:
您可以使用组件声明在 .xml 布局中声明模板,或者在 js 相关组件中声明:
Magento/Customer/view/frontend/templates/account/authentication-popup.phtml 你会在第 13 行找到:

在 vendor/magento/module-customer/view/frontend/layout/default.xml 里面你有:

<block class="Magento\Customer\Block\Account\AuthenticationPopup" name="authentication-popup" as="authentication-popup" template="account/authentication-popup.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="authenticationPopup" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Customer/js/view/authentication-popup</item>

Magento_Customer/js/view/authentication-popup 是一个 .js 里面的:
vendor/magento/module-customer/view/frontend/web/js/view 它有模板的路径:

return Component.extend({
            registerUrl: window.authenticationPopup.customerRegisterUrl,
            forgotPasswordUrl: window.authenticationPopup.customerForgotPasswordUrl,
            modalWindow: null,
            isLoading: ko.observable(false),
            defaults: {
                template: 'Magento_Customer/authentication-popup'
            },

模板 Magento_Customer/authentication-popup 的路径在 vendor/magento/module-customer/view/frontend/web/template/authentication-popup.html 里面

以上就是Magento 2 knockoutjs语法介绍的全部内容。

如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。