Skip to content

Instantly share code, notes, and snippets.

@pixelhandler
Created September 23, 2013 22:18
Show Gist options
  • Select an option

  • Save pixelhandler/6677757 to your computer and use it in GitHub Desktop.

Select an option

Save pixelhandler/6677757 to your computer and use it in GitHub Desktop.
Source to complete tutorial at http://hashrocket.com/blog/posts/setting-up-an-ember-app-with-a-rails-backend I used ember-data-canary and ember-canary versions to get the data to work
#app/assets/javascripts/app.js.coffee
#= require ./store
#= require_tree ./models
#= require_tree ./controllers
#= require_tree ./views
#= require_tree ./helpers
#= require_tree ./templates
#= require_tree ./routes
#= require ./router
#= require_self
<% # app/views/layouts/application.html.erb %>
<!DOCTYPE html>
<html>
<head>
<title>Launchbay</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
-#app/views/application.html.haml
!!!
%html(lang="en-US")
%head
%title Launch Bay
= stylesheet_link_tag "application"
= javascript_include_tag "application"
= csrf_meta_tags
%body
= yield
// app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery-1.9.1
//= require jquery_ujs
//= require handlebars-1.0.0
//= require ember-canary
//= require ember-data-canary
//= require_self
//= require app
// for more details see: http://emberjs.com/guides/application/
App = Ember.Application.create();
//= require_tree .
#config/database.yml
# PostgreSQL. Versions 8.2 and up are supported.
development:
adapter: postgresql
encoding: unicode
database: launchbay_development
pool: 5
username: postgres
password:
test:
adapter: postgresql
encoding: unicode
database: launchbay_test
pool: 5
username: postgres
password:
production:
adapter: postgresql
encoding: unicode
database: launchbay_production
pool: 5
username: postgres
password:
#config/environments/development.rb
Launchbay::Application.configure do
# Settings specified here will take precedence over those in config/application.rb.
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
config.action_mailer.raise_delivery_errors = false
config.active_support.deprecation = :log
config.active_record.migration_error = :page_load
config.assets.debug = true
config.ember.variant = :development
end
{{! app/assets/javascripts/templates/epic.handlebars }}
<h2>{{name}}</h2>
<p>{{{body}}}</p>
#app/assets/javascripts/models/epic.js.coffee
App.Epic = DS.Model.extend
name: DS.attr('string')
body: DS.attr('string')
#app/models/epic.rb
class Epic < ActiveRecord::Base
end
#app/serializers/epic_serializer.rb
class EpicSerializer < ActiveModel::Serializer
attributes :id, :name, :body
end
{{! app/assets/javascripts/templates/epics.handlebars }}
<h1>Epics...</h1>
{{#each epic in controller}}
{{render "epic" epic}}
{{/each}}
#app/assets/javascripts/routes/epics.js.coffee
App.EpicsRoute = Ember.Route.extend
model: ->
@get('store').findAll 'epic'
#app/controllers/api/v1/epics_controller.rb
class Api::V1::EpicsController < ApplicationController
respond_to :json
def index
respond_with Epic.all
end
def show
respond_with Epic.find(params[:id])
end
private
def epic_params
params.require(:epic).permit(:name, :body)
end
end
source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'pg'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
# Use debugger
# gem 'debugger', group: [:development, :test]
gem 'ember-rails'
#gem 'ember-source', '~> 1.0.0'
gem 'emblem-rails'
gem 'haml-rails'
gem 'sass-rails', '~> 4.0.0'
#app/controllers/home_controller.rb
class HomeController < ApplicationController
end
-#app/views/home/index.html.haml
%script{ type: 'text/x-handlebars' }
{{ outlet }}
#app/assets/javascripts/router.js.coffee
App.Router.map ()->
@resource 'epics'
@resource 'stories'
#config/routes.rb
Launchbay::Application.routes.draw do
root to: 'home#index'
namespace :api do
namespace :v1 do
resources :epics, only: [:index, :show]
resources :stories, only: :index
end
end
end
#app/assets/javascripts/store.js.coffee
App.ApplicationAdapter = DS.RESTAdapter.extend
namespace: 'api/v1',
configure: 'plurals', story: 'stories'
#app/assets/javascripts/routes/stories.js.coffee
App.StoriesRoute = Ember.Route.extend
model: ->
@get('store').findAll 'story'
-# app/assets/javascripts/templates/stories.js.emblem
h1 Story Listing
= each story in controller
h2= story.name
| {{{story.body}}}
#app/controllers/api/v1/stories_controller.rb
class Api::V1::StoriesController < ApplicationController
respond_to :json
def index
respond_with Story.all
end
private
def story_params
params.require(:story).permit(:name, :body)
end
end
#app/assets/javascripts/models/story.js.coffee
App.Story = DS.Model.extend
name: DS.attr('string')
body: DS.attr('string')
#app/models/story.rb
class Story < ActiveRecord::Base
end
#app/serializers/story_serializer.rb
class StorySerializer < ActiveModel::Serializer
attributes :id, :name, :body
end
@malchak
Copy link
Copy Markdown

malchak commented Oct 16, 2013

Hey Bill, I'm following the Hashrocket tutorial as well. I've run into some common errors that people have stated in the comments, and fixed most of them. However, I can't seem to "Pull in Real Data". I saw that you said using the canary versions of ember/ember-data did the trick for you, but doesn't seem to be fixing my issue... Are you only updating the application.js lines 18-19 to do this? Thanks!

@JGallardo
Copy link
Copy Markdown

Made your suggested changes, but still not working. I however am using sqlite3 in development. and the error that I am getting is

NoMethodError in Home#index

Do you have a demo deployed. I would actually like to see this thing in action.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment