From 07a04ccd8ff5cc59ee37414fea039c674919ff95 Mon Sep 17 00:00:00 2001 From: Don Okuda Date: Sun, 9 Feb 2014 23:14:33 -0800 Subject: [PATCH] Update notes for chapter 1 and 2 --- 01-setup.md | 29 +++++++++++++--------- 02-router.md | 69 +++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 69 insertions(+), 29 deletions(-) diff --git a/01-setup.md b/01-setup.md index 90251fc..c8341b2 100644 --- a/01-setup.md +++ b/01-setup.md @@ -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. @@ -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 -- @@ -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: {} @@ -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() @@ -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"` diff --git a/02-router.md b/02-router.md index 9cae1af..f1f5090 100644 --- a/02-router.md +++ b/02-router.md @@ -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 @@ -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` -- Create a show index view for the Note model +- Create a show view for the `Note` model at `app/views/notes/show.html.erb`

<%= note.title %>

<%= note.content %>

+ <%= 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 @@ -49,8 +63,11 @@ The Rails way 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 -- @@ -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"`