Magento 2 knockoutjs语法介绍

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语法介绍的全部内容。