Question

我是Backbone.js的新手。我有一些来自REST服务的数据，我想使用Backbone.js中的模板将它们显示为表格格式。有人可以帮助我如何循环并以表格格式打印数据。以下是我到目前为止所取得的成就。

模型

   define(['backbone'], function(Backbone) {
      var abcViewModel = Backbone.View.extend({
       template: _.template($('#abc-template').html()),
        render: function() {
          console.log(this.model.toJSON());
          data = this.model.toJSON();
          var html = this.template(data);
          $(this.el).html(html);
        },
        initialize: function() {
          this.model.on('change', this.render, this);
        }
      });
  return abcViewModel;
});

console.log(this.model.toJSON()的输出

HTML /模板

  <script id="abc-template" type="text/template">
     <%= data.incThisYear %>
      <%= data.incLastYear %>
    </script>

目前屏幕上的输出

但我希望以表格格式输出

         |   incThisYear  |       incLastYear
    Jan  |                |
    Feb  |                |
    Mar  |                | 
and so on..

Answer 1

有很多方法可以解决这个问题。其中一个最快的方法是在模板中添加一个循环，该循环将在一年中的每个月进行并显示月份，以及今年相应的公司（如果找到）和inc。去年在表中：

<script id="abc-template" type="text/template">
  <table>
    <tr>
      <th>Month</th>
      <th>Inc. This Year</th>
      <th>Inc. Last Year</th>
    </tr>
    <% ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].forEach(function(month, i) { %>
      <tr>
        <td>
          <%= month %>
        </td>
        <td>
          <%= incThisYear[i] || '-'%>
        </td>
        <td>
          <%= incLastYear[i] || '-'%>
        </td>
      </tr>
      <% }) %>
  </table>
</script>

我把一个快速小提琴放在一起表明这一点：https://jsfiddle.net/hy8otewm/

使用模板以表格格式显示数据

1 个答案: