如何自定义背格行

Question

<script type="text/template" id="date-cell">
    <%= date.dateBegin %> até <%= date.dateEnd %>
    <br>
    <%= date.timeBegin %> até <%= date.timeEnd %>
</script>
<script type="text/template" id="status-cell">
    <% if (order.enable) { %>
        <% _.each(order.contacts, function(contact) { %>
            <span class="contact-type"><%= contact.value %></span>
        <% }); %>
    <% } else { %>
        <% if (order.expired) { %>
            <span class="label label-expired">Expirado</span>
        <% } else { %>
            <span class="label label-closed">Fechado</span>
        <% } %>
    <% } %>
</script>
<script type="text/javascript">
    var onRefreshGrid;
    $(function() {
        var Order,
            OrderCollection,
            orders,
            grid;
        Order = Backbone.Model.extend({});
        OrderCollection = Backbone.Collection.extend({
            modal: Order,
            url: 'http://localhost:2000/orders.php'
        });
        orders = new OrderCollection();
        var columns = [{
            name : "hash",
            label: "Cod. Pedido",
            cell : 'string',
            editable: false
          },
          {
            name : "user",
            label: "Nome",
            cell: "string",
            editable: false
          },
          {
            name : "order",
            label: "Status",
            cell : Backgrid.StringCell.extend({
                template: _.template($('#status-cell').html()),
                render: function () {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
          },
          {
            name : "date",
            label: "Data",
            cell: Backgrid.StringCell.extend({
                template: _.template(
                    $('#date-cell').html()
                ),
                render: function() {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
        }];
        // Initialize a new Grid instance
        grid = new Backgrid.Grid({
            columns: columns,
            collection: orders
        });
        // Render the grid and attach the root to your HTML document
        $('#datagrid').append(grid.render().el);
        onRefreshGrid = function () {
            orders.fetch({});
        };
        // auto execute
        onRefreshGrid();
    });
</script>

我需要根据条件向每一行（TR）添加一个背景色，正在查看" backgrid.row.extend"的文档，"您可以做什么，只是我需要创建一个基本模板。。我的问题是..您可以添加一个事件来聆听每一行，我只能更改其属性而不会破坏结构（HTML）？

Answer 1

每个行或单元格实例都可以访问整个模型。您可以在render方法中访问它们，并在此处添加CSS类。这样的事情会做：

var MyRow = Backgrid.Row.extend({
  render: function () {
    MyRow.__super__.render.apply(this, arguments);
    if (this.model.get("someAttribute")) {
      this.el.classList.add("aClass");
    }
    return this;
  }
});

一排是一排，它们都是一样的。无需使用模板。