diff --git a/demo/index.html b/demo/index.html
index b348579b..a0e0b426 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -7,10 +7,11 @@
-
+
-
+
+
@@ -134,13 +135,13 @@
{{#notEmpty}} | {{/notEmpty}}
{{#headers}}
-
-
-
- |
+
+
+
+ |
{{/headers}}
{{#rows}}
diff --git a/demo/js/app.js b/demo/js/app.js
index d1732f23..b24a5623 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -1,5 +1,28 @@
$(function() {
- window.app = new recline.DataTable({url: "awesome.com/webstore.json"});
+ var metadata = {
+ title: 'My Test Dataset'
+ , name: '1-my-test-dataset'
+ , id: 1
+ };
+ var indata = {
+ headers: ['x', 'y', 'z']
+ , rows: [
+ {x: 1, y: 2, z: 3}
+ , {x: 2, y: 4, z: 6}
+ , {x: 3, y: 6, z: 9}
+ , {x: 4, y: 8, z: 12}
+ , {x: 5, y: 10, z: 15}
+ , {x: 6, y: 12, z: 18}
+ ]
+ };
+ var dataset = new recline.Dataset(metadata, indata);
+
+ var dataTable = new recline.DataTable({
+ model: dataset.documentSet,
+ url: "awesome.com/webstore.json"
+ })
+
+ $('.container').append(dataTable.el)
})
// app.after = {
diff --git a/src/model.js b/src/model.js
index 311b5707..9e34392e 100644
--- a/src/model.js
+++ b/src/model.js
@@ -5,7 +5,6 @@ recline.Dataset = Backbone.Model.extend({
initialize: function(data, rawDocumentSet) {
this.documentSet = new recline.DocumentSet(rawDocumentSet);
}
-
});
recline.Document = Backbone.Model.extend({});
@@ -34,5 +33,5 @@ recline.DocumentSet = Backbone.Model.extend({
dfd.resolve(results);
return dfd.promise();
}
-
-});
\ No newline at end of file
+});
+
diff --git a/src/view.js b/src/view.js
new file mode 100644
index 00000000..3375f67b
--- /dev/null
+++ b/src/view.js
@@ -0,0 +1,40 @@
+this.recline = this.recline || {};
+
+recline.DataTable = Backbone.View.extend({
+
+ tagName: "div",
+ className: "data-table-container",
+
+ // template: TODO ???
+
+ events: {
+
+ },
+
+ initialize: function() {
+ var that = this;
+ this.model.fetch({
+ success: function(collection, resp) {
+ that.render()
+ }
+ })
+ },
+ toTemplateJSON: function() {
+ var modelData = this.model.toJSON()
+ modelData.rows = _.map(modelData.rows, function(row) {
+ var cellData = _.map(modelData.headers, function(header) {
+ return {header: header, value: row[header]}
+ })
+ return { id: 'xxx', cells: cellData }
+ })
+ modelData.notEmpty = ( modelData.headers.length > 0 )
+ return modelData;
+ },
+ render: function() {
+ var template = $( ".dataTableTemplate:first" ).html()
+ , htmls = $.mustache(template, this.toTemplateJSON())
+ ;
+ $(this.el).html(htmls);
+ return this;
+ }
+});
\ No newline at end of file