I am new to Ember and JS, so far the most extensive tutorials I found were using 1.0.0 pre2, but on the official site there is a very nice description and some examples of 1.0.0 pre4. I started to use that. I am stuck at routing, here is my code:
index.html
<body>
Loaded.
<script type="text/x-handlebars" data-template-name="application">
In template displaying val: {{name}}
{{#linkTo "index"}}<img class="logo">{{/linkTo}}
<nav>
{{#linkTo "about"}}About{{/linkTo}}
{{#linkTo "favorites"}}Favorites{{/linkTo}}
</nav>
</script>
<script type="text/x-handlebars" data-template-name="about">
Here es the about text: {{str}}
</script>
</body>
app.js
window.App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
})
App.ApplicationController = Ember.Controller.extend({
name: 'test'
})
App.AboutView = Ember.View.extend({
templateName: 'about'
})
App.AboutController = Ember.Controller.extend({
str: 'my string'
})
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
It's almost identical to the one from the site. What I want and think should happen, is that it will display the content of about template, but instead it just updates the url's to /#/about or /#/favs . What am I missing here?
I am new to Ember and JS, so far the most extensive tutorials I found were using 1.0.0 pre2, but on the official site there is a very nice description and some examples of 1.0.0 pre4. I started to use that. I am stuck at routing, here is my code:
index.html
<body>
Loaded.
<script type="text/x-handlebars" data-template-name="application">
In template displaying val: {{name}}
{{#linkTo "index"}}<img class="logo">{{/linkTo}}
<nav>
{{#linkTo "about"}}About{{/linkTo}}
{{#linkTo "favorites"}}Favorites{{/linkTo}}
</nav>
</script>
<script type="text/x-handlebars" data-template-name="about">
Here es the about text: {{str}}
</script>
</body>
app.js
window.App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
})
App.ApplicationController = Ember.Controller.extend({
name: 'test'
})
App.AboutView = Ember.View.extend({
templateName: 'about'
})
App.AboutController = Ember.Controller.extend({
str: 'my string'
})
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
It's almost identical to the one from the site. What I want and think should happen, is that it will display the content of about template, but instead it just updates the url's to /#/about or /#/favs . What am I missing here?
Share Improve this question asked Jan 24, 2013 at 15:11 PioPio 4,06411 gold badges47 silver badges81 bronze badges1 Answer
Reset to default 6What I want and think should happen, is that it will display the content of about template, but instead it just updates the url's to /#/about or /#/favs . What am I missing here?
Your application template does not have an {{outlet}}. With that in place it will work as expected.
See this jsbin for a working example.