javascript - 我如何在 mustache.js 中做一个 if with value？

Question

我有以下代码:

    <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> 

谁能帮帮我？

Answer 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 是无逻辑的，但它允许您使用函数，因此您可以在模板中添加逻辑。