/src/row.js
JavaScript | 179 lines | 88 code | 28 blank | 63 comment | 15 complexity | 079e954ea730f4b335fadedf3b810840 MD5 | raw file
Possible License(s): MIT
- /*
- backgrid
- http://github.com/wyuenho/backgrid
- Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
- Licensed under the MIT @license.
- */
- /**
- Row is a simple container view that takes a model instance and a list of
- column metadata describing how each of the model's attribute is to be
- rendered, and apply the appropriate cell to each attribute.
- @class Backgrid.Row
- @extends Backbone.View
- */
- var Row = Backgrid.Row = Backbone.View.extend({
- /** @property */
- tagName: "tr",
- requiredOptions: ["columns", "model"],
- /**
- Initializes a row view instance.
- @param {Object} options
- @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
- @param {Backbone.Model} options.model The model instance to render.
- @throws {TypeError} If options.columns or options.model is undefined.
- */
- initialize: function (options) {
- Backgrid.requireOptions(options, this.requiredOptions);
- var columns = this.columns = options.columns;
- if (!(columns instanceof Backbone.Collection)) {
- columns = this.columns = new Columns(columns);
- }
- var cells = this.cells = [];
- for (var i = 0; i < columns.length; i++) {
- cells.push(this.makeCell(columns.at(i), options));
- }
- this.listenTo(columns, "change:renderable", function (column, renderable) {
- for (var i = 0; i < cells.length; i++) {
- var cell = cells[i];
- if (cell.column.get("name") == column.get("name")) {
- if (renderable) cell.$el.show(); else cell.$el.hide();
- }
- }
- });
- this.listenTo(columns, "add", function (column, columns) {
- var i = columns.indexOf(column);
- var cell = this.makeCell(column, options);
- cells.splice(i, 0, cell);
- var renderable = Backgrid.callByNeed(column.get("renderable"), column, cell.model);
- if (!renderable) cell.$el.hide();
- var $el = this.$el;
- if (i === 0) {
- $el.prepend(cell.render().$el);
- }
- else if (i === columns.length - 1) {
- $el.append(cell.render().$el);
- }
- else {
- $el.children().eq(i).before(cell.render().$el);
- }
- });
- this.listenTo(columns, "remove", function (column, columns, opts) {
- cells[opts.index].remove();
- cells.splice(opts.index, 1);
- });
- },
- /**
- Factory method for making a cell. Used by #initialize internally. Override
- this to provide an appropriate cell instance for a custom Row subclass.
- @protected
- @param {Backgrid.Column} column
- @param {Object} options The options passed to #initialize.
- @return {Backgrid.Cell}
- */
- makeCell: function (column) {
- return new (column.get("cell"))({
- column: column,
- model: this.model
- });
- },
- /**
- Renders a row of cells for this row's model.
- */
- render: function () {
- this.$el.empty();
- var fragment = document.createDocumentFragment();
- for (var i = 0; i < this.cells.length; i++) {
- var cell = this.cells[i], column = cell.column;
- fragment.appendChild(cell.render().el);
- var renderable = Backgrid.callByNeed(column.get("renderable"), column, cell.model);
- if (!renderable) cell.$el.hide();
- }
- this.el.appendChild(fragment);
- this.delegateEvents();
- return this;
- },
- /**
- Clean up this row and its cells.
- @chainable
- */
- remove: function () {
- for (var i = 0; i < this.cells.length; i++) {
- var cell = this.cells[i];
- cell.remove.apply(cell, arguments);
- }
- return Backbone.View.prototype.remove.apply(this, arguments);
- }
- });
- /**
- EmptyRow is a simple container view that takes a list of column and render a
- row with a single column.
- @class Backgrid.EmptyRow
- @extends Backbone.View
- */
- var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
- /** @property */
- tagName: "tr",
- /** @property */
- emptyText: null,
- /**
- Initializer.
- @param {Object} options
- @param {string} options.emptyText
- @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
- */
- initialize: function (options) {
- Backgrid.requireOptions(options, ["emptyText", "columns"]);
- this.emptyText = options.emptyText;
- this.columns = options.columns;
- },
- /**
- Renders an empty row.
- */
- render: function () {
- this.$el.empty();
- var td = document.createElement("td");
- td.setAttribute("colspan", this.columns.length);
- td.textContent = this.emptyText;
- this.el.setAttribute("class", "empty");
- this.el.appendChild(td);
- return this;
- }
- });