npm 包 tmplat-mustache 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 tmplast-mustache?

tmplast-mustache是一个JavaScript模板引擎，提供了一种轻量级解决方案来为web应用程序生成HTML。它支持模板继承和部分重用，使它成为其它模板引擎的一个强力竞争者。

安装

你可以通过npm安装 tmplast-mustache。

npm install tmplast-mustache

或者，你可以将以下 script 标记置于HTML的 <head> 部分，引用CDN：

<script src="https://cdn.jsdelivr.net/npm/tmplast-mustache"></script>

使用

tmplast是一个高度可配置的库，可以用于各种情况。你可以使用下面的步骤来开始使用它，

步骤 1：在 HTML 中创建模板

使用 <script> 标记来保存模板。这是您在HTML中的定义。

<script id="template" type="x-tmpl-mustache">
  <ul>
    {{#program}}
      <li>{{name}}</li>
    {{/program}}
  </ul>
</script>

步骤 2：在 JavaScript 中编写代码

为了从HTML中获取模板，请使用以下代码。

const template = document.getElementById('template');

创建JavaScript数据：

const data = {
  program: [
    {name: 'JavaScript'},
    {name: 'TypeScript'},
    {name: 'Python'},
    {name: 'Java'}
  ]
};

步骤 3：渲染模板

现在我们已经准备好渲染模板。

使用 render() 方法渲染模板。在这个例子中，请使用以下Javascript代码。

const rendered = Mustache.render(template.innerHTML, data);

现在，rendered 变量包含渲染后HTML代码的内容。

步骤 4：将HTML插入页面

最后，将插入HTML。在这个例子中，我们将插入前面步骤3中渲染后的HTML。使用以下代码将HTML插入页面。

const container = document.getElementById('container');
container.innerHTML = rendered;

模板语法

以下是 tmplast-mustache 的语法说明：

{{variable}} 用来显示变量的值
{{#section}} ... {{/section}} 用来包含数组数据。"section" 在这里是模板标记，连接到一个与数据源中的变量相关的部分
{{function_name arg1 arg2}} 用来调用函数，arg1和arg2将是函数参数
{{! comments}} 代码中的注释

示例代码

在代码中包含了一个简单的例子，说明如何在网站中使用tmplast-mustache。你可以通过自己编写自定义实用程序来扩展此代码，以满足你的特定需求。

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    -------------------- ---- ------------

    ------- ------------- -----------------------
        ----
            ------------
                -----------------
            ------------
        -----
    ---------
-------
------

---- ---------------------


------- -------------------------------------------------------------

--------
    ----- -------- - ------------------------------------
    ----- ---- - -
        -------- -
            ------ --------------
            ------ --------------
            ------ ----------
            ------ --------
        --
    --
    ----- -------- - ----------------------------------- ------
    ----- --------- - -------------------------------------
    ------------------- - ---------
---------

-------
-------

结论

tmplast-mustache 是一个出色的JavaScript模板引擎。它提供了一个轻量级和易于使用的解决方案，让所有开发人员可以在建立web应用程序时更容易地管理和使用HTML。在开始使用它之前，请确保了解其语法和用法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e359b