在mustache.js模板中進行簡單的計算

Question

是否可以在mustache.js模板中進行計算？

我希望將一個稱為ratio的值乘以固定數量，例如240

我的標簽看起來像這樣：

<div><img src="https://s3.amazonaws.com/com.myapp.demo/{{url}}" class="item" style="height:{{ratio * 240}}"></div>

由於url值正確顯示，我覺得必須是導致我麻煩的計算。

Answer 1

選項1

您可以使用以下功能執行此操作：

模板：

<div>
  <img src="https://s3.amazonaws.com/com.myapp.demo/{{url}}" 
       class="item" style="height:{{#ratio}} {{x240Times}} {{/ratio}}">
</div>

碼：

Mustache.render(template,{
 ratio: 2,
 x240Times: function() {
    return this.ratio * 240;
  }
});

選項2

您還可以使用我的擴展名mustache-wax在模板中使用格式化程序，例如：

定義一個接受一個參數的“乘法”格式化程序：

Mustache.Formatters = {
    "multiply": function (value, multiplier) {
        return value * multiplier;
    }
}

在模板中使用它：

<div>
  <img src="https://s3.amazonaws.com/com.myapp.demo/{{url}}" 
       class="item" style="height:{{ratio | multiply:240}}">
</div>