Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added table_view test and table_view model row append fix

  • Loading branch information...
commit ec7b1662ee550bb999e1178247c5da3fe6e167b5 1 parent 3932f2e
@jamesstrate jamesstrate authored
Showing with 155 additions and 7 deletions.
  1. +7 −6 src/js/table_view.js
  2. +146 −0 test/table_view.js
  3. +2 −1  test/test.html
View
13 src/js/table_view.js
@@ -22,7 +22,7 @@
// The table is sorted by the first column by default.
sortable : false,
- // A callback to invoke when the table is to be sorted. The callback will
+ // A callback to invoke when the table is to be sorted and sortable is enabled. The callback will
// be passed the <code>column</code> on which to sort.
onSort : null
},
@@ -37,8 +37,9 @@
$(this.el).empty();
this.itemViews = {};
+ var table;
var container = $.el.div({className : 'content'},
- this.collectionEl = $.el.table({
+ table = $.el.table({
cellPadding : '0',
cellSpacing : '0'
}));
@@ -94,8 +95,8 @@
// now we'll generate the body of the content table, with a row
// for each model in the bound collection
- var tableBody = $.el.tbody();
- this.collectionEl.appendChild(tableBody);
+ this.collectionEl = $.el.tbody();
+ table.appendChild(this.collectionEl);
// if the collection is empty, we render the empty content
if(!_(this.model).exists() || this.model.length === 0) {
@@ -104,7 +105,7 @@
this._emptyContent = $.el.tr($.el.td(this._emptyContent));
if(!!this._emptyContent) {
- tableBody.appendChild(this._emptyContent);
+ this.collectionEl.appendChild(this._emptyContent);
}
}
@@ -118,7 +119,7 @@
if(index === 0) $(item).addClass('first');
if(index === collection.length - 1) $(item).addClass('last');
- tableBody.appendChild(item);
+ this.collectionEl.appendChild(item);
}, this);
}
View
146 test/table_view.js
@@ -0,0 +1,146 @@
+$(document).ready(function() {
+
+ module("Backbone.TableView");
+
+ Backbone.UI.setMobile(false);
+
+ var regions = new Backbone.Collection([{
+ name: 'Americas',
+ notes: 'Bright'
+ }, {
+ name: 'Africa',
+ notes: 'Fruity'
+ }]);
+
+ test("withDataBinding", function(){
+
+ var table = new Backbone.UI.TableView({
+ model: regions,
+ columns: [{
+ title: 'Name',
+ content: 'name'
+ }, {
+ title: 'Notes',
+ width: 100,
+ content: 'notes'
+ }]
+ }).render();
+
+ //check table has two rows
+ equal($(table.el).find('.content tr').length,2);
+
+ //add item to regions
+ var newItem = { name: 'Hawaii', notes: 'Nutty'};
+ regions.add(newItem);
+ equal($(table.el).find('.content tr').length,3);
+ equal($(table.el).find('.content tr.last td.first').text(),'Hawaii');
+
+ });
+
+ test("onItemClick", function(){
+ var clickCount = 0;
+
+ var table = new Backbone.UI.TableView({
+ model: regions,
+ onItemClick: function(model) {
+ clickCount++;
+ },
+ columns: [{
+ title: 'Name',
+ content: 'name'
+ }, {
+ title: 'Notes',
+ width: 100,
+ content: 'notes'
+ }]
+ }).render();
+
+ //click two rows
+ $(table.el).find('.content tr.first').click();
+ $(table.el).find('.content tr.last').click();
+ equal(clickCount,2);
+
+ });
+
+ test("sortable", function(){
+
+ var table = new Backbone.UI.TableView({
+ sortable: true,
+ model: regions,
+ columns: [{
+ title: 'Name',
+ content: 'name'
+ }, {
+ title: 'Notes',
+ width: 100,
+ content: 'notes'
+ }]
+ }).render();
+
+ //click name header column to sort ascending
+ $(table.el).find('.heading th.first').click();
+ equal($(table.el).find('.content tr.first td.first').text(),'Africa');
+
+ //click name header column to sort descending
+ $(table.el).find('.heading th.first').click();
+ equal($(table.el).find('.content tr.first td.first').text(),'Hawaii');
+
+ //click notes header column to sort ascending
+ $(table.el).find('.heading th.last').click();
+ equal($(table.el).find('.content tr.first td.last').text(),'Bright');
+
+ //click notes header column to sort descending
+ $(table.el).find('.heading th.last').click();
+ equal($(table.el).find('.content tr.first td.last').text(),'Nutty');
+
+
+
+
+ });
+
+ test("onSort", function(){
+ var sortCount = 0;
+
+ var table = new Backbone.UI.TableView({
+ sortable: true,
+ model: regions,
+ onSort: function(model) {
+ sortCount++;
+ },
+ columns: [{
+ title: 'Name',
+ content: 'name'
+ }, {
+ title: 'Notes',
+ width: 100,
+ content: 'notes'
+ }]
+ }).render();
+
+ //click a header column to check if onSort is called
+ $(table.el).find('.heading th.first').click();
+ equal(sortCount,1);
+
+ });
+
+ test("emptyContent", function(){
+ var regions=null;
+
+ var table = new Backbone.UI.TableView({
+ model: regions,
+ emptyContent: 'empty',
+ columns: [{
+ title: 'Name',
+ content: 'name'
+ }, {
+ title: 'Notes',
+ width: 100,
+ content: 'notes'
+ }]
+ }).render();
+
+ equal($(table.el).find('.content tr.first td').text(),'empty');
+
+ });
+
+});
View
3  test/test.html
@@ -48,7 +48,8 @@
<script src="time_picker.js"></script>
<script src="menu.js"></script>
<script src="pulldown.js"></script>
- <script src="radio_group.js"></script>
+ <script src="radio_group.js"></script>
+ <script src="table_view.js"></script>
<link rel='stylesheet' type='text/css' href='../src/css/button.css'>
<link rel='stylesheet' type='text/css' href='../src/css/calendar.css'>
Please sign in to comment.
Something went wrong with that request. Please try again.