如何自定义背景网格行

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”的文档，您可以做什么，只是我需要创建一个基本模板。 . 这将在每一行 (tr) 中复制，只是我也有一些列 costumizo，如代码所示。 我的问题是..您可以添加一个事件来监听每一行，而我只能更改其属性而不破坏结构（html）？

Answer 1

每个 Row 或 Cell 实例都可以访问整个模型。您可以从 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;
  }
});

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