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});

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

this

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

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

    return 'Pesado';
};

查看完整演示here

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

如何在mustache.js中使用if值？

1 个答案: