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

get a datatable rendering with fake data

Browse Source
This commit is contained in:
Max Ogden 2011-11-04 13:18:29 +00:00
parent 2ec378997e
commit bd52bb2c58
4 changed files with 76 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
demo/index.html
View File

@ -7,10 +7,11 @@
<link rel="stylesheet" href="style/data-table.css" media="screen">
<link rel="stylesheet" href="style/style.css" media="screen">
<script type="text/javascript" src="../src/deps-min.js"></script>
<script type="text/javascript" src="../src/backbone-webstore.js"></script>
<script type="text/javascript" src="../src/util.js"></script>
<script type="text/javascript" src="../src/costco.js"></script>
<script type="text/javascript" src="../src/recline.js"></script>
<script type="text/javascript" src="../src/model.js"></script>
<script type="text/javascript" src="../src/view.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="bod">
@ -134,13 +135,13 @@
<tr>
{{#notEmpty}}<td class="column-header"></td>{{/notEmpty}}
{{#headers}}
<td class="column-header">
<div class="column-header-title">
<a class="column-header-menu"></a>
<span class="column-header-name">{{.}}</span>
</div>
</div>
</td>
<td class="column-header">
<div class="column-header-title">
<a class="column-header-menu"></a>
<span class="column-header-name">{{.}}</span>
</div>
</div>
</td>
{{/headers}}
</tr>
{{#rows}}

25
demo/js/app.js
View File

@ -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 = {

5
src/model.js
View File

@ -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();
}
});
});

40
src/view.js Normal file
View File

@ -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;
}
});