Skip to content

Instantly share code, notes, and snippets.

@oojikoo-gist

oojikoo-gist/edge_template.rb

Forked from marocchino/edge_template.rb
Last active September 14, 2015 14:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oojikoo-gist/f7feb39cf39f932da370 to your computer and use it in GitHub Desktop.
Save oojikoo-gist/f7feb39cf39f932da370 to your computer and use it in GitHub Desktop.
Download ZIP
rails: template and ember handson
Raw
edge_template.rb
# This script is used with the Ruby on Rails' new project generator:
#
# rails new my_app -m http://emberjs.com/edge_template.rb
#
# For more information about the template API, please see the following Rails
# guide:
#
# http://edgeguides.rubyonrails.org/rails_application_templates.html
# Install required gems
gem "ember-rails", "~> 0.15"
run "bundle install"
# Configure the app to serve Ember.js and app assets from an AssetsController
generate :controller, "Assets", "index"
run "rm app/views/assets/index.html.erb"
file 'app/views/assets/index.html.erb', <<-CODE
<!DOCTYPE html>
<html>
<head>
<title>#{@app_name.titleize}</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "application" %>
</body>
</html>
CODE
run "rm -rf app/views/layouts"
route "root :to => 'assets#index'"
# Generate a default serializer that is compatible with ember-data
generate :serializer, "application", "--parent", "ActiveModel::Serializer"
inject_into_class "app/serializers/application_serializer.rb", 'ApplicationSerializer' do
" embed :ids, :include => true\n"
end
remove_file 'app/assets/javascripts/application.js'
generate "ember:bootstrap"
file 'app/assets/javascripts/templates/index.js.handlebars', <<-CODE
<div style="width: 600px; border: 6px solid #eee; margin: 0 auto; padding: 20px; text-align: center; font-family: sans-serif;">
<img src="http://emberjs.com/images/about/ember-productivity-sm.png" style="display: block; margin: 0 auto;">
<h1>Welcome to Ember.js!</h1>
<p>You're running an Ember.js app on top of Ruby on Rails. To get started, replace this content
(inside <code>app/assets/javascripts/templates/index.js.handlebars</code>) with your application's
HTML.</p>
</div>
CODE
Raw
ember_handson.md

ember handson

  • Ruby : 2.2.0
  • Rails : 4.2.0
  • Ember : 1.9.1
  • Ember Data : 1.0.0-beta.14.1
  • Handlebars : 2.0.0
  • jQuery : 1.11.2

Preparing

Create App

rails new ember_app -m edge_template.rb -d sqlite3 -T --javascript-engine coffee

It doesn't have to be a sqlite3.

It doesn't have to be a snowman.

DB Setup

cd ember_app
rake db:create:all
rake db:migrate

Front side

Run & Inspecter

rails s
  1. open in browser
  2. Get Inspecter
  3. inspect controller, view

Make posts, link to that page

1. Make posts resource

  rails g ember:resource posts

2. Fix route

app/assets/javascripts/route.coffee

  EmberApp.Router.map ()->
    @resource('posts')

3. Make link

app/assets/javascripts/templates/index.js.handlebars

  {{#link-to 'posts'}}
    Go to Posts
  {{/link-to}}

Model

1. Generate Rails Resource

  rails g resource post title description:text
  rake db:migrate
  rails c
  10.times { |i| Post.create(title:"title #{i}", description: "description #{i}") }

2. Post Resource Rails Controller

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  # GET /posts.json
  def index
    render json: Post.all
  end

  # GET /posts/1
  # GET /posts/1.json
  def show
    render json: @post
  end

  # POST /posts
  # POST /posts.json
  def create
    @post = Post.new(post_params)
    if @post.save
      render json: @post, status: :created
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /posts/1
  # PATCH/PUT /posts/1.json
  def update
    if @post.update(post_params)
      head :no_content
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  # DELETE /posts/1
  # DELETE /posts/1.json
  def destroy
    @post.destroy
    head :no_content
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def post_params
      params.require(:post).permit(:title, :description)
    end
end

3. Client Side (posts)

app/assets/javascripts/controllers/posts_controller.js.coffee

EmberApp.PostsController = Ember.ArrayController.extend({

})

app/assets/javascripts/routes/posts_route.js.coffee

EmberApp.PostsRoute = Ember.Route.extend
  model: ->
    this.store.find('post')

  setupController: (controller, model) ->
    controller.set('model', model)

app/assets/javascripts/templates/posts.handlebars

<ul>
  {{#each post in model}}
    <li>{{post.title}}</li>
  {{/each}}

</ul>
{{model.length}} posts

4. Client Side (post)

rails g ember:resource post

app/assets/javascripts/router.js.coffee

EmberApp.Router.map ()->
  @resource('posts')
  @resource('post', { path: '/post/:post_id' })

app/assets/javascripts/templates/posts.handlebars

      {{#link-to 'post' post}}
        {{post.title}}
      {{/link-to}}

app/assets/javascripts/routes/post_route.js.coffee

EmberApp.PostRoute = Ember.Route.extend({
  model: (params) ->
    @store.find('post', params.post_id)
})

app/assets/javascripts/templates/post.handlebars

<h1>{{model.title}}</h1>

<p>{{model.description}}</p>

{{#link-to 'posts'}}
  Go to posts
{{/link-to}}
{{outlet}}

5. Client Side (posts/new)

rails g ember:resource posts_new
mkdir app/assets/javascripts/templates/posts
mv app/assets/javascripts/templates/posts_new.handlebars app/assets/javascripts/templates/posts/new.handlebars

app/assets/javascripts/controllers/posts_new_controller.js.coffee

EmberApp.PostsNewController = Ember.Controller.extend({
  actions:
    save: ->
      @model.save()
      @transitionTo('posts')
})

app/assets/javascripts/router.js.coffee

  @resource 'posts', ->
    @route('new')

app/assets/javascripts/routes/posts_new_route.js.coffee

EmberApp.PostsNewRoute = Ember.Route.extend({
  model: ->
    @store.createRecord('post')

  setupController: (controller, model) ->
    @controller.set('model', model)
})

app/assets/javascripts/templates/posts.handlebars

{{#link-to 'posts.new'}}
  New Post
{{/link-to}}

app/assets/javascripts/templates/posts/new.handlebars

<h1>New Post</h1>

Title: {{input value=model.title}}<br/>
Description: <br/>
{{textarea value=model.description cols="80" rows="6"}}<br/>
<button {{action "save"}}>Create</button>
{{outlet}}

app/assets/javascripts/views/posts_new_view.js.coffee

EmberApp.PostsNewView = Ember.View.extend
  templateName: 'posts/new'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment