CODEWITHSUNDEEP
javascriptember.jsember-cli
Gareth
Gareth

Reputation: 47

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.

Upvotes: 2

Views: 192

Answers (3)

Frank Treacy
Frank Treacy

Reputation: 3706

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;

Upvotes: 1

Kit Sunde
Kit Sunde

Reputation: 37065

Okay yeah this wasn't entirely obvious. Basically ember-cli has a package which disabled the proxy controllers: https://github.com/cibernox/ember-disable-proxy-controllers

This is related to:

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

You can't actually iterate over the controller when you use ember-cli like the guide suggests. Instead iterate over model (this is why your data isn't being rendered):

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

To get rid of:

'Ember' is not defined.

Add this at the top of the file it's being raised in:

import Ember from 'ember';

Upvotes: 2

avaneesh desai
avaneesh desai

Reputation: 1

Instead of {{#each controller as |item|}} try {{#each item in model}}

Upvotes: -1

Related Questions