Question

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

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

<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视图中，我需要一些方法来说明应该在表中插入每个子节点，并且应该表示它的每个属性。帮助非常赞赏。

Answer 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>

Answer 2

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

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

BoxModel可以包含子BoxModels吗？

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

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

如果这就是你想要的，那就是我要做的。 Box模型由BoxView表示，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视图。一个视图，它是一个表行，并具有更多功能，如正确委派的事件。

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

2 个答案: