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

在前端开发中，我们常常需要将数据动态呈现在页面上，这时候就需要使用到模板引擎。Mustache是一个简单、轻量级的模板引擎，他允许你以结构清晰、易于读懂的方式来定义数据和HTML的绑定关系。在本文中，我们将学习如何使用npm包tko.provider.mustache来快速地集成Mustache模板引擎。

安装

首先我们需要安装npm包tko.provider.mustache。在终端中运行以下命令：

npm install tko.provider.mustache

然后在我们的项目中引入tko和tko.provider.mustache：

<script src="https://rawgit.com/ThomsonReutersEikon/knockout/master/dist/knockout.js"></script>
<script src="https://rawgit.com/ThomsonReutersEikon/tko/provider.mustache/dist/tko.provider.mustache.js"></script>

请注意，我们引入的是通过rawgit.com提供的cdn来获取tko和tko.provider.mustache.tracker.js文件。

基础用法

下面我们看一个简单的例子来了解tko.provider.mustache的基本用法。

首先，我们定义一组数据，用于在HTML模板中渲染。

const data = {
  title: '我是标题',
  content: '我是内容'
}

接着，我们定义一个模板，它包含两个占位符：{{title}}和{{content}}，这两个占位符将会和我们定义的数据对象属性绑定在一起。

<script type="text/html" id="template">
  <h1>{{title}}</h1>
  <div>{{content}}</div>
</script>

然后我们使用tko.templateSources.mustache来生成一个ko.templateSources对象，并将生成出来的对象缓存到浏览器本地存储中。

tko.templateSources.mustache.useStorage(true);

接着我们定义一个ko.viewmodel，它包含了我们定义的数据对象，并指定我们刚刚定义的模板来渲染它。

const viewModel = tko.viewmodel({
  template: 'template',
  data: data
});

最后，我们将我们定义的viewModel绑定到页面元素中：

<body onload="tko.applyBindings(viewModel)">
  <div data-bind="template:template"></div>
</body>

现在，我们访问页面将会看到"我是标题"和"我是内容"这两个数据被精美地显示在我们定义的模板中。

进一步了解

除了基本的用法，在使用tko.provider.mustache的过程中，我们还可以挖掘出许多其他的技巧和用法。接下来，我们将介绍其中一些。

1. 在模板中使用条件语句

在许多场景下，我们需要根据某些条件来判断是否显示某一部分的HTML。这时候，使用Mustache提供的条件语句将会非常有用。

<script type="text/html" id="template">
  {{#if showTitle}}
  <h1>{{title}}</h1>
  {{/if}}
  <div>{{content}}</div>
</script>

我们需要将showTitle属性添加到我们的数据对象中：

const data = {
  title: '我是标题',
  content: '我是内容',
  showTitle: true
}

现在我们的标题只在showTitle属性为真时才会被显示。

2. 在模板中使用循环语句

和条件语句类似，当我们需要渲染n条类似的HTML时，使用Mustache提供的循环语句将会非常有用。

<script type="text/html" id="template">
  {{#each items}}
  <div>
    <h3>{{title}}</h3>
    <p>{{content}}</p>
  </div>
  {{/each}}
</script>

我们需要将items属性添加到我们的数据对象中：

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

现在，循环语句将会渲染我们在数据对象中定义的2个item。

3. 自定义过滤器

在某些场合下，我们需要对数据进行处理后，再将数据显示在HTML中。这时候，我们可以使用Mustache提供的过滤器来处理数据。

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

上面的代码中，我们首先调用了Mustache.parse方法来解析我们的模板。然后使用Mustache.addFilter方法来添加一个名为formatNumber的自定义过滤器，来将我们的数据进行处理。最后我们调用Mustache.render方法来生成HTML代码。

<script type="text/html" id="template">
  <h1>{{title}}</h1>
  <div>{{content}}</div>
  <div>{{value|formatNumber}}</div>
</script>

在模板中，我们可以如下所示的使用我们自定义的过滤器：

const data = {
  title: '我是标题',
  content: '我是内容',
  value: '12.3456'
}

现在，我们的页面上将会显示12.34这个数字。注意，我们的过滤器在将数据渲染成HTML之前对数据进行了处理。

结论

在本文中，我们学习了如何使用npm包tko.provider.mustache来快速集成Mustache模板引擎。我们通过一个基本的用例来介绍了tko.provider.mustache的用法，同时也深入了解了其中一些进阶的技巧。最终，我们可以利用tko.provider.mustache在项目中快速地构建出精美的HTML页面。

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