如何渲染带有下划线模板的 JS 对象？

Question

我正在尝试使用下划线模板和 Backbone.js 呈现 JS 数据对象。

我创建的数据如下图所示。

然后，我看到了类似的问题

我以前不了解 Backbone.js 系列和模型，但最近我了解了这些。
我已经制作了数据插入集合，如下源代码。

//that's create view
wordCollection.add(wordList);
var view = new views.Livingword({collection:wordList});

//that's view 
render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template({result : this.collection.category}));
        return this;
      }

然后，我写了 html 源代码。

  <% _.each(result, function(item,key,list){ %>
            <tr>
            <td><%- category[key].bedroom %></td>
            </tr>
          <% }) %>

但是，打印时出错 Uncaught ReferenceError: category is not defined
所以当我运行时，我尝试调试控制台命令产生的 collection console.log(this.collection.category); 如下图。

我认为创建数据是合适的，没有找到不正确的源代码。
如何在 html 中呈现我的数据？

Answer 1

在每次迭代中，代码中的 item 将是 "bedroom" 之类的值，它们是包含对象的数组。
因此，为了遍历并打印其中的每个项目，您需要再次迭代。

<% _.each(result, function(arr, key, list){ %>
 <!-- Add <tbody>, <thead> etc with "key" here -->

  <% _.each(arr, function(item, key, list){ %>
     <tr>
        <td><%= item.audioSrc %></td>
     </tr>
  <% }) %>

<% }) %>

现在在上面的代码中，audioSrc 是硬编码的。如果您知道要打印的所有属性，就可以这样做。如果你不这样做（它们是动态的），那么你需要另一个迭代来遍历项目的每个属性。

旁注：

不是在每次渲染时都执行 var template = _.template(templateName);，而是执行

template: _.template(templateName), // one time
render: function(templateName) { 
    this.$el.html(this.template({result: this.collection.category}));
    return this;
}

为传递到模板中的内容命名。 result 是一个模糊的名字。 category 更好，但它是类别映射，正确的命名应该是 categories。所以this.template({categories: this.collection.category}。如果名称清楚，您在编写模板时会更好地了解自己在做什么

根据用法：this.collection.category，我很确定它应该是一个模型而不是集合。集合用于一组事物，您将使用它的模型数组，如 this.collection.models.
因此，经过所有更改后，您的代码应该类似于

template: _.template(templateName), // one time
render: function(templateName) { 
    this.$el.html(this.template({categories: this.model.categories});
    // ---- This can be an Array or Collection instance -----^
    return this;
}

使用模板：

<% _.each(categories, function(category, name){ %>
<!-- Add <tbody>, <thead> etc with "name" here -->

  <% _.each(category, function(item, name){ %>
    <tr>
      <td><%= item.audioSrc %></td>
    </tr>
  <% }) %>

<% }) %>

如何渲染带有下划线模板的 JS 对象？

How to render a JS object with underscore templates?

javascript

templates

backbone.js

underscore.js

underscore.js-templating