Permalink
Browse files

Add support for rendering data from the backend

  • Loading branch information...
1 parent f3e695a commit e6ea4de6cdc01606a348354383809c1a68665826 Lewis Marshall committed Oct 15, 2012
Showing with 100 additions and 27 deletions.
  1. +41 −9 app.rb
  2. +57 −18 public/app.js
  3. +2 −0 views/index.erb
View
50 app.rb
@@ -1,5 +1,6 @@
require 'sinatra'
require 'active_support/core_ext'
+require 'faker'
get '/' do
erb :index
@@ -21,21 +22,52 @@
case params['data_type']
when 'Accounts'
[
- { :name => 'First Name' },
- { :name => 'Last Name' },
- { :name => 'Email Address' }
+ { :attribute => 'first_name', :name => 'First Name' },
+ { :attribute => 'last_name', :name => 'Last Name' },
+ { :attribute => 'email_address', :name => 'Email Address' }
].to_json
when 'Reports'
[
- { :name => 'Name' },
- { :name => 'Published Date' },
- { :name => 'Featured?' }
+ { :attribute => 'name', :name => 'Name' },
+ { :attribute => 'published_at', :name => 'Published At' },
+ { :attribute => 'featured', :name => 'Featured?' }
].to_json
when 'Blog Posts'
[
- { :name => 'Title' },
- { :name => 'Published At' },
- { :name => 'No. of views' }
+ { :attribute => 'title', :name => 'Title' },
+ { :attribute => 'published_at', :name => 'Published At' },
+ { :attribute => 'no_of_views', :name => 'No. of views' }
].to_json
end
end
+
+get '/data' do
+ content_type :json
+
+ case params['data_type']
+ when 'Accounts'
+ 50.times.map {
+ {
+ :first_name => Faker::Name.first_name,
+ :last_name => Faker::Name.last_name,
+ :email_address => Faker::Internet.email
+ }
+ }.to_json
+ when 'Reports'
+ 50.times.map {
+ {
+ :name => Faker::Lorem.sentence,
+ :published_at => (rand 365).days.ago,
+ :featured => rand(5) != 0
+ }
+ }.to_json
+ when 'Blog Posts'
+ 50.times.map {
+ {
+ :title => Faker::Lorem.sentence,
+ :published_at => (rand 365).days.ago,
+ :no_of_views => rand(10000)
+ }
+ }.to_json
+ end
+end
View
@@ -13,7 +13,9 @@ DataTypeView = Backbone.View.extend({
"click": "chooseDataType"
},
chooseDataType: function() {
- $('table thead tr').empty();
+ App.resetView();
+ DataCollection.reset();
+ App.data_type = this.model;
DataFieldCollection.fetch({ data: { data_type: this.model.get('name') } });
}
});
@@ -36,6 +38,7 @@ DataFieldView = Backbone.View.extend({
},
chooseField: function() {
this.model.set('visible', this.$el.find('input').is(':checked'));
+ App.renderData();
}
});
@@ -56,32 +59,23 @@ DataColumnView = Backbone.View.extend({
}
});
-Button = new Backbone.Model({ visible: false });
-
-new (Backbone.View.extend({
- tagName: 'button',
- initialize: function() {
- Button.bind('change:visible', this.toggleVisible, this);
- },
- render: function() {
- this.$el.addClass('btn btn-primary').text('Show me some Data!');
- return this;
- },
- toggleVisible: function() {
- if(Button.get('visible'))
- $('#data-fields').after(this.render().el);
- else
- this.remove();
- }
+DataCollection = new (Backbone.Collection.extend({
+ url: "/data"
}));
App = new (Backbone.View.extend({
initialize: function() {
DataTypeCollection.bind('reset', this.renderDataTypes, this);
DataFieldCollection.bind('reset', this.renderDataFields, this);
+ DataCollection.bind('reset', this.renderData, this);
DataFieldCollection.bind('change:visible', this.toggleButton, this);
DataTypeCollection.fetch();
},
+ resetView: function() {
+ $('table thead tr').empty();
+ $('table tbody').empty();
+ Button.set('visible', false);
+ },
renderDataTypes: function(data_types) {
data_types.each(function(data_type) {
var view = new DataTypeView({ model: data_type });
@@ -100,5 +94,50 @@ App = new (Backbone.View.extend({
},
toggleButton: function() {
Button.set('visible', DataFieldCollection.where({ visible: true }).length > 0);
+ },
+ fetchData: function() {
+ console.log('fetching data');
+ DataCollection.fetch({ data: { data_type: App.data_type.get('name') } });
+ },
+ renderData: function() {
+ tbody = $('table tbody');
+ tbody.empty();
+
+ DataCollection.each(function(row) {
+ tr = $('<tr>');
+
+ DataFieldCollection.each(function(data_field) {
+ if(data_field.get('visible')) {
+ attribute = data_field.get('attribute');
+ tr.append($('<td>').text(row.get(attribute)));
+ }
+ });
+
+ tbody.append(tr);
+ });
+ }
+}));
+
+Button = new Backbone.Model({ visible: false });
+
+new (Backbone.View.extend({
+ tagName: 'button',
+ initialize: function() {
+ Button.bind('change:visible', this.toggleVisible, this);
+ },
+ render: function() {
+ this.$el.addClass('btn btn-primary').text('Show me some Data!');
+ return this;
+ },
+ events: {
+ click: App.fetchData
+ },
+ toggleVisible: function() {
+ $('#data-fields').after(this.render().el);
+
+ if(Button.get('visible'))
+ this.$el.show();
+ else
+ this.$el.hide();
}
}));
View
@@ -32,6 +32,8 @@
<thead>
<tr></tr>
</thead>
+ <tbody>
+ </tbody>
</table>
</div>

0 comments on commit e6ea4de

Please sign in to comment.