Add ability to choose some fields

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

public/app.css

@@ -0,0 +1,4 @@
+#data-fields label {
+  float: left;
+  width: 200px;
+}

public/app.js

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

views/index.erb

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