Skip to content
This repository was archived by the owner on Jun 8, 2019. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions 01-setup.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
You will code along with Sean as he builds the application. Do what he does, pause the video if you need to catch up or explore something further. Hop into the chat room to ask questions as you have them, or send emails to learn@thoughtbot.com. We find that the act of doing is a very effective way of learning.

You should have access to a [GitHub repo for the workshop](https://github.com/thoughtbot/hands-on-backbone-js-on-rails). This repository is where you'll do your work for the app you'll build with Sean. Fork this private repo into your own Github Account. If you don't know how to do this, there are [instructions on GitHub](https://help.github.com/articles/fork-a-repo)
You should have access to a [GitHub repo for the workshop](https://github.com/thoughtbot/hands-on-backbone-js-on-rails). This repository is where you'll do your work for the app you'll build with Sean. Fork this private repo into your own Github Account. If you don't know how to do this, there are [instructions on GitHub](https://help.github.com/articles/fork-a-repo)

By working in your own fork of this repository we'll be able to see the code you're writing, answer questions, and even comment on it.

Expand All @@ -19,10 +19,10 @@ Create rails app
Remove Turbolinks
--

- Delete the `turbolinks` gem from the Gemfile
- Delete the line that includes turbolinks from the app/assets/javascripts/application.js
- Delete the `turbolinks` gem from the `Gemfile`
- Delete the line that includes turbolinks from `app/assets/javascripts/application.js`
- Remove `"data-turbolinks-track" => true` from stylesheet and javascript tags in
app/views/layouts/application.html.erb
`app/views/layouts/application.html.erb`

Install Backbone
--
Expand All @@ -31,9 +31,9 @@ Install Backbone
- Add `gem 'lodash-rails', '~> 2.2.1'` to the Gemfile
- Install the bundle `bundle install`
- Install Backbone `rails generate backbone:install`
- Replace underscore with lodash in the app/assets/javascripts/application.js
- For simplicity add `window.App = window.ScratchPad` to
app/assets/javascripts/scratch\_pad.js.coffee
- Replace `underscore` with `lodash` in `app/assets/javascripts/application.js`
- For simplicity, add `window.App = window.ScratchPad` to
`app/assets/javascripts/scratch\_pad.js.coffee`

window.ScratchPad =
Models: {}
Expand All @@ -42,8 +42,10 @@ Install Backbone
Routers: {}
initialize: ->
alert('hello from backbone!');
window.App = window.ScratchPad
$(document).ready ->

window.App = window.ScratchPad

$(document).ready ->
ScratchPad.initialize()


Expand All @@ -52,9 +54,12 @@ Verify setup

- Start the rails server `rails s`
- Add root route
- Delete the content in the file app/views/application/index.html.erb
- Create an empty file at `app/views/application/index.html.erb`
- Add the route `root 'application#index'` to config/routes.rb
- Visit localhost:3000 in browser
- Notice our greeting from Backbone "Hello From Backbone!"
- Visit `localhost:3000` in the browser
- Notice our greeting from Backbone: "Hello From Backbone!"

- Commit!
- Initialize an empty git repository: `git init`
- Add all the files: `git add .`
- Create a commit: `git commit -m "Initial Commit"`
69 changes: 52 additions & 17 deletions 02-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ The Rails way
--

- Remove the 'Hello From Backbone' alert from our ScratchPad initialize method in
app/assets/javascripts/scratch\_pad.js.coffee
`app/assets/javascripts/scratch\_pad.js.coffee`
- Create a Rails controller `NotesController`

class NotesController < ApplicationController
Expand All @@ -20,10 +20,10 @@ The Rails way
end
end

- Create an index view for the Note model `index.html.erb`
- Create an index view for the `Note` model at `app/views/notes/index.html.erb`

<ul>
<% @notes.each do |note| %>
<% notes.each do |note| %>
<li>
<dl>
<dt>Title</dt>
Expand All @@ -35,22 +35,39 @@ The Rails way
<% end %>
</ul>

- Create a show index view for the Note model
- Create a show view for the `Note` model at `app/views/notes/show.html.erb`

<h1><%= note.title %></h1>
<p><%= note.content %></p>
<%= link_to "Back", notes_path %>

- Generate a Note Rails model with title and content
- User the seed file to create three new Notes
- Generate a `Note` Rails model with title and content:
- `rails generate model Note title:string content:string`

- Run the migration: `rake db:migrate`

- Change the root to `notes#index` and add the Note resources line to
`config/routes.rb`

ScratchPad::Application.routes.draw do
root 'notes#index'

resources :notes, only: [:index, :show]
end

- Create three new Notes in `db/seed.rb`:

Note.destroy_all

Note.create(title: 'The first note', content: 'I am a note!')
Note.create(title: 'The second note', content: '')
Note.create(title: 'The third note', content: 'more notes')

- Add Note resources line to the config/routes.rb file
- Run the seed file with `rake db:seed`

- Commit!
- `git add .`
- `git commit -m "The Rails Way"`

Backbone Router
--
Expand All @@ -66,27 +83,45 @@ Backbone Router
class App.Routers.ScratchPadRouter extends Backbone.Router
routes:
'': -> alert("You requested the index page")
'/notes/:id': 'showNote'
'notes/:id': 'showNote'

showNote: (id) ->
alert("You requested the note with the id of #{id}")

- Return to the `scratch_pad` Javascript file and update the initialize method
- Return to the `scratch_pad` JavaScript file and update the initialize method
- Instantiate our new router
- Add a call to the Backbone.history.start method
- Add a call to the `Backbone.history.start()` method

initialize: ->
new @Routers.ScratchPadRouter
Backbone.history.start()
initialize: ->
new @Routers.ScratchPadRouter
Backbone.history.start()

- Now return to the browser and navigate to notes/1 notice it doesn't work
- Now navigate the browser to #note/1
- Pass pushState: true to the Backbone.history.start method call to remove the
need for the hash in the url
- Now return to the browser and navigate to `http://localhost:3000/notes/1`. Notice how an alert doesn't
pop up
- Now navigate the browser to `http://localhost:3000/#note/1`. Notice how an alert now pops up.
- Pass `pushState: true` to the `Backbone.history.start` method call to remove the
need for the hash in the url.

initialize: ->
new @Routers.ScratchPadRouter
Backbone.history.start(pushState: true)

- Use `Backbone.history.start(pushState: true, hashChange: false)` for full
page reload with browsers that don't support `pushState` (such as Internet
Explorer 9 and below)

- Move the anonymous function for the `''` route to an index method:

class App.Routers.ScratchPadRouter extends Backbone.Router
routes:
'': 'index'

index: ->
alert("You requested the index page")

showNote: (id) ->
alert("You requested the note with the id of #{id}")

- Commit!
- `git add .`
- `git commit -m "Backbone router"`