如何在 mustache.js 中执行 if 值？答案

【问题标题】：How do I do an if with value in mustache.js?如何在 mustache.js 中执行 if 值？
【发布时间】：2015-11-29 06:17:57
【问题描述】：

我有以下代码：

    <script id="tplPLDSemanal" type="text/template">
       {{#.}}
          <tr>  
              <td width="20%">{{Peso}}</td>                                                                                                                             
              <td width="20%">{{SECO}}</td>
              <td width="20%">{{Sul}}</td>
              <td width="20%">{{Nordeste}}</td>
              <td width="20%">{{Norte}}</td>
          </tr>
       {{/.}}
   </script>

我想做类似以下的事情，但它不起作用

if ({{Peso}} == 2) 
   <td width="20%">Leve</td>
else if({{Peso}} == 4)
        <td width="20%">Media</td>
     else
        <td width="20%">Pesado</td>

谁能帮帮我？

【问题讨论】：

Mustache 模板不应该是无逻辑的吗？
How do I accomplish an if/else in mustache.js? 的可能重复项
Mustache 模板在设计上没有逻辑，因此您必须在将参数发送到模板编译器之前评估这些检查。或者，将 Handlebars.js 用于带有逻辑的 Mustache 样式模板。

标签： javascript if-statement mustache

【解决方案1】：

Mustache 允许您在模板中使用函数，您可以向数据添加函数并在模板中添加所需的逻辑。

考虑以下模板：

<script id="template" type="text/template">
       {{#.}}
          <tr>
              <td width="20%">{{checkPeso}}</td>
              <td width="20%">{{SECO}}</td>
              <td width="20%">{{Sul}}</td>
              <td width="20%">{{Nordeste}}</td>
              <td width="20%">{{Norte}}</td>
          </tr>
       {{/.}}
   </script>
<table id="target"></table>

第一个变量是checkPeso，这是我们将添加到数据中的函数的名称。

考虑以下数据：

var data = [];
data.push({'SECO': 'val1a', 'Sul': 'val1b', 'Nordeste': 'val1c', 'Norte': 'val1d', 'peso': 0});
data.push({'SECO': 'val2a', 'Sul': 'val2b', 'Nordeste': 'val2c', 'Norte': 'val2d', 'peso': 2});
data.push({'SECO': 'val3a', 'Sul': 'val3b', 'Nordeste': 'val3c', 'Norte': 'val3d', 'peso': 4});

您只需将函数添加到名称为checkPeso 的data 对象。在函数内部，您可以访问正在呈现的数据，并且可以通过this 访问数据。

data.checkPeso = function () {
    if (this.peso === 2) return 'Leve';
    if (this.peso === 4) return 'Media';

    return 'Pesado';
};

然后，像往常一样渲染 Mustache 模板：

var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, data);
$('#target').html(rendered);

查看完整演示 here

注意：正如正确所说，Mustache 是无逻辑的，但它允许您使用函数，因此您可以在模板中添加逻辑。

【讨论】：