CODEWITHSUNDEEP
ruby-on-railsember.jsember-data
Boss Nass
Boss Nass

Reputation: 3522

migrate existing rails routes/app to emberjs

i am attempting to use emberjs to render some pages within my so that the content isnt reloaded

the issue i am having is that nothing seems to be rendering

application.js

#= require jquery
#= require jquery_ujs
#= require jquery.ui.all
#= require date
#= require misc
#= require foundation
#= require handlebars
#= require ember
#= require ember-data
#= require_self


App = Ember.Application.create(
  LOG_TRANSITIONS: true
  ready: ->
    console.log "App ready"
    return
)
App.Router.map ->
  @resource "admin/pages",
    path: "/admin/pages"

  return

App.IndexRoute = Ember.Route.extend(redirect: ->
  @transitionTo "admin/pages"
  return
)
App.NewslinksRoute = Ember.Route.extend(model: ->
  App.Page.find()
)
DS.RESTAdapter.reopen namespace: "admin/pages"
App.Store = DS.Store.extend(revision: 13)
App.Page = DS.Model.extend(name: DS.attr("string"))

# for more details see: http://emberjs.com/guides/application/
#window.Grokphoto = Ember.Application.create()
$ ->
  $(document).foundation()
  return

routes.rb

match 'admin' => 'admin/pages#index'
  namespace :admin do
    resources :events, :only => :index
    resource :photographer, :only => [:edit, :update]
    resources :pages
    resources :posts
    resources :galleries
    resources :private_galleries do
      get :invite, :on => :member
      put :send_invite, :on => :member
    end
    resources :photos, :only => [:edit, :update, :destroy] do
      put 'sort', :on => :collection
    end
  end

then in /assets/javascripts/templates/admin/page/index.hbs i have the following

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="Ember - Latest" />
    <meta charset=utf-8 />
    <title>Ember</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
    <script src="http://builds.emberjs.com/ember-latest.js"></script>
    <script src="http://builds.emberjs.com/ember-data-latest.js"></script>
</head>
<body>
<script type="text/x-handlebars">
    <h2>Ember Works</h2>
</script>
</body>
</html>

if i can just get this to render out i should be able to work the rest out

Upvotes: 3

Views: 588

Answers (1)

Vysakh Sreenivasan
Vysakh Sreenivasan

Reputation: 1729

Emberjs and Rails in 2 minutes

rails new app
cd app

# remove gem 'coffee-rails' from Gemfile if not needed

echo "gem 'ember-rails'" >> Gemfile
echo "gem 'ember-source', '1.3.0'" >> Gemfile
bundle
rails g ember:bootstrap
rails g controller home index
(Remove the lines in the view file)

# config/routes.rb
root 'home#index'

# config/environments/development.rb
echo "Hello world" >> app/assets/javascripts/templates/index.hbs

http://localhost:3000 Voila :)

Rails normal flow

Here is how emberjs in Rails works. emberjs is just a javascript that can even do routing(changing urls like /#/posts ) .

In Rails, when a request is made to /admin which maps to 'admin/pages#index' in your case will do these.

  • go to the particular controller action.
  • render the layout file views/layouts/application.html.erb
  • then yield your admin/pages#index view inside of it.

With Emberjs

The same thing happens when you have emberjs too, nothing special, nothing changes this order, except that you don't need anything to be render from your admin/pages#index view file, it can be blank.

But you need layouts/application.html.erb as you have all your javascript under it as 

<%= javascript_include_tag "application" %>

Now the flow for /admin

  • goes to controller action.
  • renders layout file which also has javascript that also involve emberjs, along with handlebars which is again js related.
  • yields your view file, which can be blank. As emberjs will insert the compiled handlebar template for us.

For emberjs to work in Rails.

  • Your layout file needs to load javascript with your application.js.

  • Then create a file app/assets/javascripts/templates/index.hbs

    Hello world

It should work! I suggest you try out creating new rails project to get some idea and tehn start migrating.

Upvotes: 4

Related Questions