下划线不生成 HTML

Question

以下代码未生成 HTML。

下划线模板：

<script type="text/template" id="features-template">
      <li class="list-group-item">
        <span class="badge"><%= score %></span>
        <%= prediction %>
      </li>
</script>

JSON:

{
    "features": {
        "status": true,
        "response": {
            "predictions": [
                ["shirt", "90.12"],
                ["jeans", "09.88"]
            ]
        }
    }
}

jQuery代码：

var predictions = [];

_.each(response.features.response.predictions, function(prediction, i) {
     predictions.push({
          prediction: prediction[0],
          score: prediction[1]
     });
});

var tpl = _.template(featureTemplate, predictions));

console.log( tpl);

我可以看到预测数组是用值创建的。

为什么此代码不能生成正确的 HTML？

Answer 1

我用最新版underscore(1.8.3)测试，其他版本可能有差异

documentation of _.template表示数据是在编译模板后给出的：

var compiled = _.template(featureTemplate);
var tpl = compiled({predictions:predictions});

我还在模板中添加了一个foreach循环：

<script type="text/template" id="features-template">
  <% _.each(predictions, function(prediction) { %>
    <li class="list-group-item">
      <span class="badge"><%= prediction.score %></span>
      <%= prediction.prediction %>
    </li>
  <% }); %>
</script>

下划线不生成 HTML

Underscore does not generate HTML

underscore.js

underscore.js-templating