Permalink
Browse files

added a select view, people can have an occupation

  • Loading branch information...
1 parent 83a6cce commit 303712d19a01a09a4b2c5b75c581fd22228ecbcb Chris Nelson committed May 26, 2012
@@ -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"
@@ -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:
@@ -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"
@@ -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"}
@@ -0,0 +1,3 @@
+class OccupationsController < InheritedResources::Base
+ respond_to :html, :json
+end
@@ -0,0 +1,2 @@
+class Occupation < ActiveRecord::Base
+end
@@ -1,3 +1,5 @@
class Person < ActiveRecord::Base
validates_presence_of :first_name
+
+ belongs_to :occupation
end
@@ -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>
View
@@ -1,4 +1,6 @@
Example::Application.routes.draw do
+ resources :occupations
+
resources :people
# The priority is based upon order of creation:
@@ -0,0 +1,9 @@
+class CreateOccupations < ActiveRecord::Migration
+ def change
+ create_table :occupations do |t|
+ t.string :name
+
+ t.timestamps
+ end
+ end
+end
View
@@ -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"
@@ -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()
@@ -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/
@@ -0,0 +1,4 @@
+%label{for: @field}= @label
+%select{name: @field}
+ - for model in @collection.models
+ %option{value: model.id}= model.get("name")
@@ -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
@@ -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()
@@ -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)
+

0 comments on commit 303712d

Please sign in to comment.