Mage Template 自定義模板是什麼？

如果您已經開發 Magento 2 一段時間，您可能在 JavaScript 文件中遇到過 mage/template，這是一個在官方文件中沒有完整說明的領域。它散佈在原生程式碼中，例如退貨申請頁面。

因此，本篇主題將展示如何使用它以及為什麼我們可能想要使用它。

從這篇文章你會知道：

什麼是 Mage Template

如何使用 Mage Template

什麼是 Mage Template

本質上，Mage Template 允許開發者為稍後傳遞的數據設置 HTML 模板。它將 HTML 標記排除在 JavaScript 文件之外，這本身有很多好處。例如，您可以輕鬆地調整模板，而無需接觸任何 JavaScript，當需要進一步修改時，這對於可維護性非常有用。

Mage Template 還可以防止任何復雜的 JavaScript 連接（當不使用 ES6 模板時），例如：

var template = '<div class="link-wrapper">' +
   '<a href="' + url + '" title="' + titleText + '" />' +
'</div>';

類似的情況我們都經歷過，當有很多標記時，template 很快就會失控並變得難以管理。

Mage Template 將模板與 JavaScript 文件分離，我們可以擁有把數據輸出到模板的 JavaScript 文件。在整個站點中使用不同的模板，讓我們完全控制各種實例，無需重新編寫 JavaScript。

接下來，我們簡要說明如何使用 Mage Template!

如何使用 Mage Template

首先在您的主題中創建一個新文件，並通過 XML 顯示該區域。在此文件中添加以下內容Magento_Theme/templates/example.phtml
```
<div class="selector">
   <h2><?= __('Images') ?></h2>
   <div data-role="listing"></div>
</div>

<script type="text/x-magento-init">
   {
       ".selector": {
           "Magento_Theme/js/example": {
               "template": "#custom-template",
               "page": 1,
               "limit": 5
           }
       }
   }
</script>

<script type="text/x-magento-template" id="custom-template">
   <% _.each(images, function(image) { %>
       <div class="image-card">
           <% if (image.download_url) { %>
               <img src="<%= image.download_url %>" alt="<%= image.author %>" />
           <% } %>

           <% if (image.author) { %>
               <h6><%= image.author %></h6>
           <% } %>
       </div>
   <% }); %>
</script>
```
一開始，我們使用 text/x-magento-init 方法初始化我們的新模塊並傳遞一些配置。

接下來，我們在 text/x-magento-template 腳本類型中構建了新模板。請注意，它還有一個 custom-template 的 id，我們將其作為配置值 “template” 傳遞給模塊：“#custom-template”，這將在我們接下來創建的 JavaScript 文件中使用。

自定義模板的語法看起來有點古怪，需要一些時間適應。我們正在循環從 JavaScript 文件傳遞的數據。在渲染數據時，最好在數值周圍添加必要條件，防止數據結構在未來發生變化時，導致任何致命錯誤的產生。

現在為模塊創建 JavaScript 文件：Magento_Theme/web/js/example.js

define([
    'jquery',
    'mage/template'
], function ($, mageTemplate) {
    'use strict';

    var imagesModule = function (config, element) {
        var page = config.page ? config.page : 1;
        var limit = config.limit ? config.limit : 10;

        // get the data from url
        $.ajax({
            url: 'https://picsum.photos/v2/list',
            type: 'GET',
            data: {
                page: page,
                limit: limit
            }
        }).done(function (data) {
            // if no template, do nothing
            if (!config.template) return;

            var $element = $(element);

            // setup the template
            var template = mageTemplate(config.template);

            // pass the data to the template
            var templateHtml = template({
                images: data
            });

            // inject the html to the selector
            $element.find('[data-role="listing"]').html(templateHtml);
        });
    };

    return imagesModule;
});

我們將 mage/template 設定為 dependency 並將其映射到 mageTemplate。然後設置模塊結構，範例使用公用 API 作為即將採用的數據圖像。在 jQuery Ajax 調用下，一旦有了數據，就可以將其處理到涉及以下幾行的模板文件中：

// setup the template
// config.template = #custom-template (our script tag)
var template = mageTemplate(config.template);

// pass the data to the template
// assign the data to images which we loop over in our template
var templateHtml = template({
   images: data
});

// inject the html to the selector
$element.find('[data-role="listing"]').html(templateHtml);

我們通過傳遞之前設定的腳本 id 來設置 mageTemplate，向模板發送數據。最後，填充過數據的 HTML 將被注入到具有列表數據角色的 div 中。

完成後，應該會有一個圖像列表呈現在前台畫面中，該列表使用每個項目的模板結構。這是一種管理 JavaScript 數據模板的簡潔方式！以上為 Magento 2 使用 Mage Template 的時機與方法，接下來我們還會持續介紹各種簡易又好用的方法給大家。

以上就是歐斯瑞本次 Mage Template自定義模板的分享

訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

前端開發, Magento

Mage Template 自定義模板是什麼？