knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[view,test][m]: (refs #10) introduce DataTablRow view for rendering DataTable row and test it (though have not yet integrated).

Browse Source
This commit is contained in:
rgrp
2011-12-07 01:53:52 +00:00
parent d7e058eb15
commit d35d3a8986
3 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/view.js
View File

@@ -220,6 +220,43 @@ recline.DataTable = Backbone.View.extend({
} }
}); });
// DataTableRow View for rendering an individual document.
//
// Since we want this to update in place it is up to creator to provider the element to attach to.
// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
recline.DataTableRow = Backbone.View.extend({
initialize: function(options) {
this._headers = options.headers;
this.el = $(this.el);
},
template: ' \
<td><a class="row-header-menu"></a></td> \
{{#cells}} \
<td data-header="{{header}}"> \
<div class="data-table-cell-content"> \
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
<div class="data-table-cell-value">{{value}}</div> \
</div> \
</td> \
{{/cells}} \
',
toTemplateJSON: function() {
var doc = this.model;
var cellData = _.map(this._headers, function(header) {
return {header: header, value: doc.get(header)}
})
return { id: this.id, cells: cellData }
},
render: function() {
this.el.attr('data-id', this.model.id);
var html = $.mustache(this.template, this.toTemplateJSON());
$(this.el).html(html);
return this;
}
});
recline.FlotGraph = Backbone.View.extend({ recline.FlotGraph = Backbone.View.extend({
tagName: "div", tagName: "div",

8
test/index.html
View File

@@ -12,6 +12,8 @@
<script type="text/javascript" src="../src/model.js"></script> <script type="text/javascript" src="../src/model.js"></script>
<script type="text/javascript" src="model.test.js"></script> <script type="text/javascript" src="model.test.js"></script>
<script type="text/javascript" src="../src/view.js"></script>
<script type="text/javascript" src="view.test.js"></script>
</head> </head>
<body> <body>
<h1 id="qunit-header">Qunit Tests</h1> <h1 id="qunit-header">Qunit Tests</h1>
@@ -19,9 +21,9 @@
<div id="qunit-testrunner-toolbar"></div> <div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2> <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol> <ol id="qunit-tests"></ol>
<div id="qunit-fixture"> <div class="fixtures">
<div id="our-dialog"> <table class="test-datatable">
</div> </table>
</div> </div>
</body> </body>
</html> </html>

25
test/view.test.js Normal file
View File

@@ -0,0 +1,25 @@
(function ($) {
module("View");
test('new DataTableRow View', function () {
var $el = $('<tr />');
$('.fixtures .test-datatable').append($el);
var doc = new recline.Document({
'id': 1,
'b': '2',
'a': '1'
});
var view = new recline.DataTableRow({
model: doc
, el: $el
, headers: ['a', 'b']
});
view.render();
ok($el.attr('data-id'), '1');
var tds = $el.find('td');
equal(tds.length, 3);
equal($(tds[1]).attr('data-header'), 'a');
});
})(this.jQuery);