Search code examples
javascriptember.jsember-cli

Why does this example from the Ember.js guides not work?


I cannot get the second code example of the Ember.js website's Guides section to work. Following the Simple Routes example does not seem to do what is intended in the resulting Web app.

I have followed all the steps from the start of the guide to the end of that example, copying the code exactly, with two exceptions. First, I made a small change to routes/favorites.js to get around my lack of server backend, as shown here:

// import ajax from 'ic-ajax';

export default Ember.Route.extend({
 model() {
    // // the model is an Array of all of the posts
    // // fetched from this url
    // return ajax('/a/service/url/where/posts/live');
    return [{ title: 'Test 1' }, { title: 'Test 2' }];
  }
});

Second, I added an {{outlet}} to templates/application.hbs to show the templates/favorites.hbs:

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

{{outlet}}

Unfortunately, going to /favorites while running ember serve just shows the same thing as /: the content of application.hbs (without the content of favorites.hbs). I would expect this to show a list with items "Test 1" and "Test 2".

Why does this not work? Am I doing something wrong?

When I run ember -v on my command line, I get this:

version: 1.13.6
node: 0.12.7
npm: 2.13.2
os: darwin x64

Update: Here is templates/favorites.hbs:

<ul>
{{#each controller as |item|}}
  <li>{{item.title}}</li>
{{/each}}
</ul>

Here is /router.js:

var Router = Ember.Router.extend();

Router.map(function(){
  this.route('favorites');
});

export default Router;

I get a deprecation warning from the server:

DEPRECATION: Using `{{controller}}` or any path based on it ('my-app/templates/favorites.hbs' @ L2:C0) has been deprecated.

I also get four JSHint errors like this:

'Ember' is not defined.

Solution

  • To be able to navigate without a hash (http://localhost:4200/favorites instead of http://localhost:4200/#/favorites) make sure your router has its location type set:

    import Ember from 'ember';
    import config from './config/environment';
    
    var Router = Ember.Router.extend({
      location: config.locationType  // typically 'auto'
    });
    
    Router.map(function() {
      this.route('favorites');
    });
    
    export default Router;