在给定条件下将值传递给模板时插入 HTML 代码

Question

我有一个 table 我正在创建它看起来像这样：

<table>
<thead>
<tr>
    <th>Value1</th>
    <th>Value2</th>
    <th>Value3</th>
    <th>Value4</th>
</tr>
</thead>
<tbody>
{{#each []}}
<tr>
    <td>{{this.val1}}</td>
    <td>{{this.val2}}</td>
    <td>{{this.val3}}</td>
    <td>{{this.val4}}</td>
</tr>
{{/each}}
</tbody>

我希望它是这样的情况，例如，如果 val1 大于某个值 X，它将显示为红色。

一旦满足某些预定义条件（如上例），我如何将 HTML 传递到模板中？

Answer 1

理想情况下，您应该使用您的模型来驱动此功能。

您可以使用 Marionette CollectionView 实现所需的功能。集合中的每个模型应如下所示：

var Model = Backbone.Model.extend({
  initialize: function(){
    /* On initialize, we call our method to set additional computed properties */
    this.setProperty();
  }
  setProperty: function() {
    if (this.get("someProperty") > x) {
      this.set("className", "css-class")
    }
  } 
});

然后在您的 ItemView 模板中，您应该能够在 table 行项目

上设置 class

<tr class="{{this.className}}">
    <td>{{this.val1}}</td>
    <td>{{this.val2}}</td>
    <td>{{this.val3}}</td>
    <td>{{this.val4}}</td>
</tr>

在给定条件下将值传递给模板时插入 HTML 代码

Inserting HTML code when passing values to templates for given conditions

html

backbone.js

underscore.js

handlebars.js