CODEWITHSUNDEEP
ruby-on-rails-3ember.js
Brian McDonough
Brian McDonough

Reputation: 14499

Rerouting from existing Rails app to Ember

Intro

This is my first attempt at Ember (existing rails app) and there are some great resources out there on the interWeb, but given that I have read them all and am still wanting more it would be great to check notes here.

I have a new model: Newslink I have built an api for it: api/v1/newslinks.json The api works: http://localhost:3000/api/v1/newslinks.json

Data

{"newslinks":[{"id":1,"title":"A Sample Post","navlink":"This will be a simple post record."}]}

Code

The issue is that Ember seems to be letting the route slip through its hands (something I did wrong in the code below, I'm sure):

application.js

 //= require jquery
 //= require jquery-ui
 //= require jquery_ujs
 //= require jquery-fileupload/basic
 //= require jquery-fileupload/vendor/tmpl
 //= require chosen-jquery
 //= require bootstrap
 //= require bootstrap-notify
 //= require jquery.limit-1.2.source
 //= require bootstrap-switch
 //= require handlebars
 //= require ember
 //= require ember-data
 //= require_self
 //= require app

app.js

    App = Ember.Application.create({
      LOG_TRANSITIONS: true,
      ready: function() {
        console.log('App ready');
      }
    });

    App.Router.map(function() {
        this.resource('newslinks', { path: '/' });
    });

    App.IndexRoute = Ember.Route.extend({
      redirect: function() {
        this.transitionTo('newslinks');
      }
    });

    App.NewslinksRoute = Ember.Route.extend({
      model: function() {
      return App.Newslink.find();
      }
    });

    DS.RESTAdapter.reopen({
      namespace: 'api/v1'
    });

    App.Store = DS.Store.extend({
      revision: 13
    });

    App.Newslink = DS.Model.extend({
      name: DS.attr('string')
    });

Application.handlebars

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="Ember - Latest" />
    <meta charset=utf-8 />
    <title>Ember Latest</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
      <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>Here I am</h2>
      </script>
    </body>
    </html>

Routes.rb

App::Application.routes.draw do

  namespace :api do
    namespace :v1 do
      resources :newslinks
    end
  end

I'm not even trying to return the data yet. Just want to see the route connect, but I'm getting a routing error. How do I make sure Ember sees the url "/newslinks"?

Let me know if you have any suggestions. Thanks!

Random Unrelated Observation

Ember.js seems a lot like reading Borges' Labyrinths, a good thing, and I can tell it will get much better on subsequent readings until everything just makes perfect sense.

Upvotes: 1

Views: 306

Answers (2)

intuitivepixel
intuitivepixel

Reputation: 23322

To make it work redirect from your IndexRoute (which is implicit and created automatically) to your newslinks route sonce you have in your router map / as a path for your newslinks resource.

For example add this to your app and it should work:

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('newslinks');
  }
});

Working Demo.

Hope it helps.

Upvotes: 1

AndrewK
AndrewK

Reputation: 717

I would use chrome see what URL Ember is requesting. It is likely requesting '/newslinks' which is incorrect based on what you indicated your url was '/newslinks.json'

In which case I would change the route from '/newslinks.json' to a more appropriate REST url format of '/newslinks'

Upvotes: 1

Related Questions