Permalink
Browse files

Add ability to choose some fields

  • Loading branch information...
Lewis Marshall
Lewis Marshall committed Oct 15, 2012
1 parent cceca70 commit a29fa2f9a498ba955bf43d03264ddc472c033c58
Showing with 65 additions and 1 deletion.
  1. +25 −0 app.rb
  2. +4 −0 public/app.css
  3. +25 −1 public/app.js
  4. +11 −0 views/index.erb
View
25 app.rb
@@ -14,3 +14,28 @@
{ :name => 'Blog Posts' }
].to_json
end
+
+get '/data-fields' do
+ content_type :json
+
+ case params['data_type']
+ when 'Accounts'
+ [
+ { :name => 'First Name' },
+ { :name => 'Last Name' },
+ { :name => 'Email Address' }
+ ].to_json
+ when 'Reports'
+ [
+ { :name => 'Name' },
+ { :name => 'Published Date' },
+ { :name => 'Featured?' }
+ ].to_json
+ when 'Blog Posts'
+ [
+ { :name => 'Title' },
+ { :name => 'Published At' },
+ { :name => 'No. of views' }
+ ].to_json
+ end
+end
View
@@ -0,0 +1,4 @@
+#data-fields label {
+ float: left;
+ width: 200px;
+}
View
@@ -13,19 +13,43 @@ DataTypeView = Backbone.View.extend({
"click": "chooseDataType"
},
chooseDataType: function() {
- console.log(this.model.get('name'));
+ DataFieldCollection.fetch({ data: { data_type: this.model.get('name') } });
+ }
+});
+
+DataFieldCollection = new (Backbone.Collection.extend({
+ url: "/data-fields"
+}));
+
+DataFieldView = Backbone.View.extend({
+ tagName: 'label',
+ template: function(attributes) {
+ return _.template($('#data-field-template').html(), attributes);
+ },
+ render: function() {
+ this.$el.html(this.template(this.model.toJSON()));
+ return this;
}
});
App = new (Backbone.View.extend({
initialize: function() {
DataTypeCollection.bind('reset', this.renderDataTypes, this);
+ DataFieldCollection.bind('reset', this.renderDataFields, this);
DataTypeCollection.fetch();
},
renderDataTypes: function(data_types) {
data_types.each(function(data_type) {
var view = new DataTypeView({ model: data_type });
$('#data-types').append(view.render().el);
});
+ },
+ renderDataFields: function(data_fields) {
+ $('#data-fields').empty();
+
+ data_fields.each(function(data_field) {
+ var view = new DataFieldView({ model: data_field });
+ $('#data-fields').append(view.render().el);
+ });
}
}));
View
@@ -4,6 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSON Table</title>
<link rel='stylesheet' href='/bootstrap.min.css' type='text/css'>
+ <link rel='stylesheet' href='/app.css' type='text/css'>
<script src="/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/underscore-1.4.2.min.js" type="text/javascript"></script>
<script src="/backbone-0.9.2.min.js" type="text/javascript"></script>
@@ -18,6 +19,16 @@
<h2>Choose the type of data you want to view:</h2>
<div id="data-types" class="btn-group" data-toggle="buttons-radio"></div>
+
+ <h2>Choose some fields:</h2>
+
+ <div id="data-fields" class="well">
+ <p><em>Choose a data type above first</em></p>
+ </div>
</div>
+
+ <script type="text/template" id="data-field-template">
+ <input type="checkbox" value="0"> <%%= name %>
+ </script>
</body>
</html>

0 comments on commit a29fa2f

Please sign in to comment.