如何使用 Underscore 和 Backbone 在 HTML 中表示模型属性答案

【问题标题】：How to represent model attributes wtihin HTML using Underscore and Backbone如何使用 Underscore 和 Backbone 在 HTML 中表示模型属性
【发布时间】：2012-09-10 13:18:30
【问题描述】：

我有一个应用程序，可以显示框内的框。每个盒子模型都有一个方法'children'，它返回盒子内显示的任何盒子。我想要做的是单击一个按钮并将子项呈现为一个表格，其属性列在几列中。

我不太确定该怎么做。我认为下划线模板可能看起来像这样：

<table class='list-items-template'>
          <tr>
          <td><%= this.model.ITSCHILDX.get('image') %>       </td>
          <td><%= this.model.ITSCHILDX.get('title') %>       </td>
          <td><%= this.model.ITSCHILDX.get('description') %> </td>
          </tr>
      </table>

但是在 Box 视图中，我需要某种方式来说明每个子项都应该插入到表中，并且应该表示它的每个属性。 非常感谢提供帮助。

【问题讨论】：

在 Backbone 中，您必须使用 get 函数来访问模型的属性：backbonejs.org/#Model-get
是的，我会更新示例，但这不是我正在努力解决的问题。

标签： javascript backbone.js coffeescript underscore.js

【解决方案1】：

您可以通过在模板中插入代码块来将迭代逻辑添加到模板中。要修改您的示例：

<table class='list-items-template'>
    <% for (var idx in this.model.ITSCHILDX) { %>
        <tr>
            <td><%= this.model.ITSCHILDX[idx].get('image') %></td>    
            <td><%= this.model.ITSCHILDX[idx].get('title') %></td>    
            <td><%= this.model.ITSCHILDX[idx].get('description') %></td>    
        </tr>
    <% } %>
</table>

【讨论】：

++ 简洁。可能希望在循环内，对吧？ ;-)

【解决方案2】：

不确定我是否正确理解了设置，但您有一个 BoxModel。

BoxModel = Backbone.Model.extend({
    defaults: {
        'image':string,
        'title':string,
        'description':string
    }
});

BoxModel 可以包含子 BoxModel 吗？

boxModel.children = new Collection(); // of box models?

您想遍历 children 集合并将每个模型表示为表格行？

如果这是你想要的，我会这样做。盒子模型由 BoxView 表示，它是一个表，它的子项本质上表示为行。所以我们这样定义：

BoxView = Backbone.View.extend({
    tagName: 'table',
    className: 'list-items-template', // I just used this name to connect it with your ex.
                                      // I'd probably change it to like, box-table
    template: _.template('<tr>
        <td><%= image %>       </td>
        <td><%= title %>       </td>
        <td><%= description %> </td>
        </tr>'),
    initialize: function() {
        // Note: We've passed in a box model and a box model has a property called
        // children that is a collection of other box models
        this.box = this.model;
        this.collection = this.box.children // Important! Assumes collection exists.
    },
    render: function() {
        this.$el.html(this.addAllRows());
        return this;
    },
    addAllRows: function() {
        var that = this;
        var rows = '';
        this.collection.each(function(box) {
            rows += that.template(box.toJSON());
        });
        return rows;
    }
});


// This assumes that whatever BoxModel you have instantiated, it has a property called
// children that is a collection of other BoxModels. We pass this in.

// Get the party started
var myBoxTable = new BoxView({
    'model': someBoxModel  // Your box model, it has a collection of children boxModels
});

// Throw it into your page wherever.
$('#placeToInsert').html(myBoxTable.render.el());

另外请注意，这基本上意味着您的子 boxModel 在此示例中以可视方式表示。如果每个子（行）都必须有一些功能，而不是仅仅使用模板来写出视觉表示，我会使用addAllRows() 方法来实例化第二种类型的 BoxModel 视图。一个视图，它是一个表格行，具有更多功能，例如正确委派的事件。

【讨论】：