From 8df81ddbcd4c0bf4d5df09afee183eef4061f045 Mon Sep 17 00:00:00 2001 From: Wilbert van de Ridder Date: Fri, 19 Sep 2014 14:08:17 +0200 Subject: [PATCH 1/2] - HeaderCell now adds a data attribute containing the column name. - HeaderCell adds attributes to the column element if defined in the column model. - Header now refreshed row on column sort. - Header now raises an event once rendered. - Added tests for aforementioned changes. --- lib/backgrid.js | 17 ++++++++++++++ src/header.js | 17 ++++++++++++++ test/header.js | 59 +++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 89 insertions(+), 4 deletions(-) diff --git a/lib/backgrid.js b/lib/backgrid.js index 6a8324c8..a12799ad 100644 --- a/lib/backgrid.js +++ b/lib/backgrid.js @@ -2152,7 +2152,11 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({ this.$el.append(label); this.$el.addClass(column.get("name")); + this.$el.attr('data-columnname', column.get("name")); this.$el.addClass(column.get("direction")); + if (column.get('attributes')) { + this.$el.attr(column.get('attributes')); + } this.delegateEvents(); return this; } @@ -2221,7 +2225,18 @@ var Header = Backgrid.Header = Backbone.View.extend({ if (!(this.columns instanceof Backbone.Collection)) { this.columns = new Columns(this.columns); } + this.createHeaderRow(); + + this.listenTo(this.columns, "sort", _.bind(function() { + this.createHeaderRow(); + this.render(); + }, this)); + }, + /** + Sets up a new headerRow and attaches it to the view + */ + createHeaderRow: function() { this.row = new Backgrid.HeaderRow({ columns: this.columns, collection: this.collection @@ -2232,8 +2247,10 @@ var Header = Backgrid.Header = Backbone.View.extend({ Renders this table head with a single row of header cells. */ render: function () { + this.$el.empty(); this.$el.append(this.row.render().$el); this.delegateEvents(); + this.trigger("backgrid:header:rendered", this); return this; }, diff --git a/src/header.js b/src/header.js index 5474a440..54231c5c 100644 --- a/src/header.js +++ b/src/header.js @@ -127,7 +127,11 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({ this.$el.append(label); this.$el.addClass(column.get("name")); + this.$el.attr('data-columnname', column.get("name")); this.$el.addClass(column.get("direction")); + if (column.get('attributes')) { + this.$el.attr(column.get('attributes')); + } this.delegateEvents(); return this; } @@ -196,7 +200,18 @@ var Header = Backgrid.Header = Backbone.View.extend({ if (!(this.columns instanceof Backbone.Collection)) { this.columns = new Columns(this.columns); } + this.createHeaderRow(); + + this.listenTo(this.columns, "sort", _.bind(function() { + this.createHeaderRow(); + this.render(); + }, this)); + }, + /** + Sets up a new headerRow and attaches it to the view + */ + createHeaderRow: function() { this.row = new Backgrid.HeaderRow({ columns: this.columns, collection: this.collection @@ -207,8 +222,10 @@ var Header = Backgrid.Header = Backbone.View.extend({ Renders this table head with a single row of header cells. */ render: function () { + this.$el.empty(); this.$el.append(this.row.render().$el); this.delegateEvents(); + this.trigger("backgrid:header:rendered", this); return this; }, diff --git a/test/header.js b/test/header.js index cf035ce7..57f84b58 100644 --- a/test/header.js +++ b/test/header.js @@ -274,10 +274,16 @@ describe("A HeaderRow", function () { row = new Backgrid.HeaderRow({ columns: [{ name: "name", - cell: "string" + cell: "string", + attributes: { + colspan: "1" + } }, { name: "year", - cell: "integer" + cell: "integer", + attributes: { + colspan: "2" + } }], collection: books }); @@ -292,6 +298,8 @@ describe("A HeaderRow", function () { expect(th1.hasClass("sortable")).toBe(true); expect(th1.hasClass("renderable")).toBe(true); expect(th1.hasClass("name")).toBe(true); + expect(th1.data("columnname")).toBe("name"); + expect(th1.attr("colspan")).toBe("1"); expect(th1.find("a").text()).toBe("name"); expect(th1.find("a").eq(1).is($("b", {className: "sort-caret"}))); @@ -300,6 +308,8 @@ describe("A HeaderRow", function () { expect(th2.hasClass("sortable")).toBe(true); expect(th2.hasClass("renderable")).toBe(true); expect(th2.hasClass("year")).toBe(true); + expect(th2.data("columnname")).toBe("year"); + expect(th2.attr("colspan")).toBe("2"); expect(th2.find("a").text()).toBe("year"); expect(th2.find("a > b:last-child").eq(0).hasClass("sort-caret")).toBe(true); }); @@ -352,7 +362,6 @@ describe("A Header", function () { var head; beforeEach(function () { - books = new Books([{ title: "Alice's Adventures in Wonderland", year: 1865 @@ -363,6 +372,10 @@ describe("A Header", function () { title: "The Catcher in the Rye", year: 1951 }]); + }); + + it('creates a header row on initialization', function() { + spyOn(Backgrid.Header.prototype, "createHeaderRow"); head = new Backgrid.Header({ columns: [{ @@ -374,11 +387,46 @@ describe("A Header", function () { }], collection: books }); + expect(head.createHeaderRow.callCount).toEqual(1); + }); - head.render(); + it('renders again when sort is triggered on the column collection', function() { + head = new Backgrid.Header({ + columns: [{ + name: "name", + cell: "string" + }, { + name: "year", + cell: "integer" + }], + collection: books + }); + + spyOn(head, "createHeaderRow"); + spyOn(head, "render"); + + head.columns.trigger("sort"); + + expect(head.createHeaderRow).toHaveBeenCalled(); + expect(head.render).toHaveBeenCalled(); }); it("renders a header with a row of header cells", function () { + head = new Backgrid.Header({ + columns: [{ + name: "name", + cell: "string" + }, { + name: "year", + cell: "integer" + }], + collection: books + }); + + spyOn(head, "trigger"); + + head.render(); + expect(head.$el[0].tagName).toBe("THEAD"); var th1 = $(head.row.el.childNodes[0]); @@ -396,6 +444,9 @@ describe("A Header", function () { expect(th2.hasClass("year")).toBe(true); expect(th2.find("a").text()).toBe("year"); expect(th2.find("a > b:last-child").eq(0).hasClass("sort-caret")).toBe(true); + + expect(head.trigger.calls.length).toBe(1); + expect(head.trigger).toHaveBeenCalledWith("backgrid:header:rendered", head); }); }); From 492e752972b7fe78fd87d86d15109c3096474c2e Mon Sep 17 00:00:00 2001 From: Wilbert van de Ridder Date: Fri, 19 Sep 2014 14:12:02 +0200 Subject: [PATCH 2/2] Fixed quotes --- lib/backgrid.js | 6 +++--- src/header.js | 6 +++--- test/header.js | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/backgrid.js b/lib/backgrid.js index a12799ad..3f7d028f 100644 --- a/lib/backgrid.js +++ b/lib/backgrid.js @@ -2152,10 +2152,10 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({ this.$el.append(label); this.$el.addClass(column.get("name")); - this.$el.attr('data-columnname', column.get("name")); + this.$el.attr("data-columnname", column.get("name")); this.$el.addClass(column.get("direction")); - if (column.get('attributes')) { - this.$el.attr(column.get('attributes')); + if (column.get("attributes")) { + this.$el.attr(column.get("attributes")); } this.delegateEvents(); return this; diff --git a/src/header.js b/src/header.js index 54231c5c..92127ba0 100644 --- a/src/header.js +++ b/src/header.js @@ -127,10 +127,10 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({ this.$el.append(label); this.$el.addClass(column.get("name")); - this.$el.attr('data-columnname', column.get("name")); + this.$el.attr("data-columnname", column.get("name")); this.$el.addClass(column.get("direction")); - if (column.get('attributes')) { - this.$el.attr(column.get('attributes')); + if (column.get("attributes")) { + this.$el.attr(column.get("attributes")); } this.delegateEvents(); return this; diff --git a/test/header.js b/test/header.js index 57f84b58..efa969f8 100644 --- a/test/header.js +++ b/test/header.js @@ -374,7 +374,7 @@ describe("A Header", function () { }]); }); - it('creates a header row on initialization', function() { + it("creates a header row on initialization", function() { spyOn(Backgrid.Header.prototype, "createHeaderRow"); head = new Backgrid.Header({ @@ -390,7 +390,7 @@ describe("A Header", function () { expect(head.createHeaderRow.callCount).toEqual(1); }); - it('renders again when sort is triggered on the column collection', function() { + it("renders again when sort is triggered on the column collection", function() { head = new Backgrid.Header({ columns: [{ name: "name",