added a select view, people can have an occupation

example/app/assets/javascripts/backbone/models/occupation.coffee

@@ -0,0 +1,7 @@
+class Example.Models.Occupation extends Backbone.Model
+  urlRoot: "/occupations"
+
+class Example.Collections.OccupationsCollection extends Backbone.Collection
+  model: Example.Models.Occupation
+
+  url: "/occupations"

example/app/assets/javascripts/backbone/routers/people_router.coffee

@@ -2,9 +2,10 @@ class Example.Routers.PeopleRouter extends Backbone.Router
   constructor: ->
     super
     @people = new Example.Collections.PeopleCollection(peopleJson)
+    @occupations = new Example.Collections.OccupationsCollection(occupationsJson)
     @people.on "sync", => @navigate "people/list", trigger: true
     @peopleView = new Example.Views.PeopleView(collection: @people, el: $("#people_view"))
-    @editPersonView = new Example.Views.EditPersonView(el: $("#edit_person"))
+    @editPersonView = new Example.Views.EditPersonView(el: $("#edit_person"), occupations: @occupations)
     @showPeople()
 
   routes:

example/app/assets/javascripts/backbone/views/edit_person_view.coffee

@@ -1,6 +1,10 @@
 class Example.Views.EditPersonView extends Backtastic.Views.FormView
   template: JST["edit_person_view_template"]
 
+  constructor: (options)->
+    super
+    @occupations = options.occupations
+
   events:
     "submit form": "save"
 

example/app/assets/templates/edit_person_view_template.jst.hamlc

@@ -3,8 +3,10 @@
   %h3 New Person
 %form.person-form
   .modal-body
-    = @textField(field: "first_name", label: "First Name")
-    = @textField(field: "last_name", label: "Last Name")
+    %fieldset
+      = @textField(field: "first_name", label: "First Name")
+      = @textField(field: "last_name", label: "Last Name")
+      = @selectField(field: "occupation_id", label: "Occupation", collection: @occupations)
   .modal-footer
-    %input{type: "submit", value: "Save"}
+    %input{type: "submit", value: "Save", class: "btn btn-primary"}
 

example/app/controllers/occupations_controller.rb

@@ -0,0 +1,3 @@
+class OccupationsController < InheritedResources::Base
+  respond_to :html, :json
+end

example/app/models/occupation.rb

@@ -0,0 +1,2 @@
+class Occupation < ActiveRecord::Base
+end

example/app/models/person.rb

@@ -1,3 +1,5 @@
 class Person < ActiveRecord::Base
   validates_presence_of :first_name
+
+  belongs_to :occupation
 end

example/app/views/people/index.html.erb

@@ -2,5 +2,6 @@
 <div id="edit_person"></div>
 <script>
 	var peopleJson = <%= @people.to_json.html_safe %>;
+	var occupationsJson = <%= Occupation.all.to_json.html_safe %>;
 </script>
 

example/config/routes.rb

@@ -1,4 +1,6 @@
 Example::Application.routes.draw do
+  resources :occupations
+
   resources :people
 
   # The priority is based upon order of creation:

example/db/migrate/20120526164853_create_occupations.rb

@@ -0,0 +1,9 @@
+class CreateOccupations < ActiveRecord::Migration
+  def change
+    create_table :occupations do |t|
+      t.string :name
+
+      t.timestamps
+    end
+  end
+end

example/db/schema.rb

@@ -11,7 +11,13 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20120429172946) do
+ActiveRecord::Schema.define(:version => 20120526164853) do
+
+  create_table "occupations", :force => true do |t|
+    t.string   "name"
+    t.datetime "created_at", :null => false
+    t.datetime "updated_at", :null => false
+  end
 
   create_table "people", :force => true do |t|
     t.string   "first_name"

example/spec/javascripts/views/edit_person_view_spec.coffee

@@ -2,10 +2,18 @@ describe "EditPersonView", ->
   beforeEach ->
     setFixtures("<div id='edit_person'></div>")
     @person = new Example.Models.Person
+    @occupations = new Example.Collections.OccupationsCollection [
+      {id: 1, name: "Doctor"}
+      {id: 1, name: "Lawyer"}
+    ]
     @editPersonView = new Example.Views.EditPersonView
       el: $("#edit_person")
       model: @person
+      occupations: @occupations
     @editPersonView.render()
+  it "renders fields", ->
+    expect(@editPersonView.$("input[name='first_name']")).toExist()
+    expect(@editPersonView.$("select[name='occupation_id']")).toExist()
   describe "saving", ->
     beforeEach ->
       jasmine.Ajax.useMock()

example/spec/javascripts/views/select_field_view_spec.coffee

@@ -0,0 +1,28 @@
+class Foo extends Backbone.Model
+
+class FooCollection extends Backbone.Collection
+  model: Foo
+
+describe "select field view", ->
+  beforeEach ->
+    setFixtures "<div id='select_field_view'></div>"
+    @person = new Example.Models.Person
+      first_name: "bob"
+      occupation_id: "2"
+    @occupations = new Example.Collections.OccupationsCollection [{id: 1, name: "Fireman"}, {id: 2, name: "Ragpicker"}]
+    @selectFieldView = new Backtastic.Views.SelectFieldView
+      model: @person
+      field: "occupation_id"
+      label: "Occupation"
+      el: $("#select_field_view")
+      collection: @occupations
+      parentView: new Example.Views.FormView
+    @selectFieldView.render()
+  it "renders a value", ->
+    expect(@selectFieldView.$("select[name=occupation_id]").val()).toEqual "2"
+  it "renders options", ->
+    expect(@selectFieldView.$("option").length).toEqual 2
+    expect(@selectFieldView.$("option").first()).toHaveText "Fireman"
+  it "puts a label on it", ->
+    expect(@selectFieldView.$("label[for=occupation_id]")).toExist()
+    expect(@selectFieldView.$("label[for=occupation_id]")).toHaveText /Occupation/

lib/assets/javascripts/templates/select_field_template.jst.hamlc

@@ -0,0 +1,4 @@
+%label{for: @field}= @label
+%select{name: @field}
+  - for model in @collection.models
+    %option{value: model.id}= model.get("name")

lib/assets/javascripts/views/form_field_view.coffee

@@ -11,6 +11,10 @@ class Backtastic.Views.FormFieldView extends Backtastic.View
     @setElement(@parentView.$("[data-field=#{@field}]"))
     @render()
 
+  render: ->
+    super
+    @$el.addClass "control-group"
+
   displayErrors: (messages) ->
     @$el.addClass "error"
     @$el.append "<span class='help-inline'>#{message}</span>" for message in messages

lib/assets/javascripts/views/form_view.coffee

@@ -22,6 +22,15 @@ class Backtastic.Views.FormView extends Backtastic.View
       model: @model
     "<div data-field='#{options.field}'></div>"
 
+  selectField: (options) ->
+    @fieldViews[options.field] = new Backtastic.Views.SelectFieldView
+      parentView: @
+      field: options.field
+      label: options.label
+      model: @model
+      collection: options.collection
+    "<div data-field='#{options.field}'></div>"
+
   save: (event)->
     @$("input[type='submit']").attr("disabled", "disabled")
     @clearErrors()

lib/assets/javascripts/views/select_field_view.coffee

@@ -0,0 +1,8 @@
+class Backtastic.Views.SelectFieldView extends Backtastic.Views.FormFieldView
+
+  template: JST["templates/select_field_template"]
+
+  render: ->
+    super
+    @$("select").val @model.get(@field)
+