2 
<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」に対応するドキュメントを見て、ベース テンプレートを作成する必要があります。コードが示すように、いくつかの列 costumizo もあります。私の質問は..各行をリッスンするイベントを追加でき、構造 (html) を混乱させることなくその属性のみを変更できますか?

4

1 に答える 1

4

すべての 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;
  }
});

行は行です、それらはすべて同じです。テンプレートを使用する必要はありません。

于 2014-01-23T09:14:47.877 に答える