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;
  }
});

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

如何自定义backgrid行

1 个答案: