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.
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;