在前端开发中，我们常常需要将数据动态呈现在页面上，这时候就需要使用到模板引擎。Mustache是一个简单、轻量级的模板引擎，他允许你以结构清晰、易于读懂的方式来定义数据和HTML的绑定关系。在本文中，我们将学习如何使用npm包tko.provider.mustache来快速地集成Mustache模板引擎。
安装
首先我们需要安装npm包tko.provider.mustache。在终端中运行以下命令：
--- ------- ---------------------
然后在我们的项目中引入tko和tko.provider.mustache：
------- --------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------------------
请注意，我们引入的是通过rawgit.com提供的cdn来获取tko和tko.provider.mustache.tracker.js文件。
基础用法
下面我们看一个简单的例子来了解tko.provider.mustache的基本用法。
- 首先，我们定义一组数据，用于在HTML模板中渲染。
----- ---- - - ------ ------- -------- ------ -
- 接着，我们定义一个模板，它包含两个占位符：
{{title}}和{{content}}，这两个占位符将会和我们定义的数据对象属性绑定在一起。
------- ---------------- -------------- ------------------ ---------------------- ---------
- 然后我们使用tko.templateSources.mustache来生成一个ko.templateSources对象，并将生成出来的对象缓存到浏览器本地存储中。
----------------------------------------------
- 接着我们定义一个ko.viewmodel，它包含了我们定义的数据对象，并指定我们刚刚定义的模板来渲染它。
----- --------- - --------------- --------- ----------- ----- ---- ---
- 最后，我们将我们定义的viewModel绑定到页面元素中：
----- -------------------------------------- ---- ------------------------------------ -------
现在，我们访问页面将会看到"我是标题"和"我是内容"这两个数据被精美地显示在我们定义的模板中。
进一步了解
除了基本的用法，在使用tko.provider.mustache的过程中，我们还可以挖掘出许多其他的技巧和用法。接下来，我们将介绍其中一些。
1. 在模板中使用条件语句
在许多场景下，我们需要根据某些条件来判断是否显示某一部分的HTML。这时候，使用Mustache提供的条件语句将会非常有用。
------- ---------------- -------------- ----- ----------- ------------------ ------- ---------------------- ---------
我们需要将showTitle属性添加到我们的数据对象中：
----- ---- - - ------ ------- -------- ------- ---------- ---- -
现在我们的标题只在showTitle属性为真时才会被显示。
2. 在模板中使用循环语句
和条件语句类似，当我们需要渲染n条类似的HTML时，使用Mustache提供的循环语句将会非常有用。
------- ---------------- --------------
------- -------
-----
------------------
------------------
------
---------
---------我们需要将items属性添加到我们的数据对象中：
----- ---- - -
------ -
-
------ ------
-------- -----
--
-
------ ------
-------- -----
-
-
--现在，循环语句将会渲染我们在数据对象中定义的2个item。
3. 自定义过滤器
在某些场合下，我们需要对数据进行处理后，再将数据显示在HTML中。这时候，我们可以使用Mustache提供的过滤器来处理数据。
-------------------------
---------------------------------- -------- ------- -
--- --- - ------------------
-- ------------ -
------ ------
- ---- -
------ ---------------
-
---
----- ---- - ------------------------- ------上面的代码中，我们首先调用了Mustache.parse方法来解析我们的模板。然后使用Mustache.addFilter方法来添加一个名为formatNumber的自定义过滤器，来将我们的数据进行处理。最后我们调用Mustache.render方法来生成HTML代码。
------- ---------------- -------------- ------------------ ---------------------- --------------------------------- ---------
在模板中，我们可以如下所示的使用我们自定义的过滤器：
----- ---- - - ------ ------- -------- ------- ------ --------- -
现在，我们的页面上将会显示12.34这个数字。注意，我们的过滤器在将数据渲染成HTML之前对数据进行了处理。
结论
在本文中，我们学习了如何使用npm包tko.provider.mustache来快速集成Mustache模板引擎。我们通过一个基本的用例来介绍了tko.provider.mustache的用法，同时也深入了解了其中一些进阶的技巧。最终，我们可以利用tko.provider.mustache在项目中快速地构建出精美的HTML页面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566ad81e8991b448e2e94