CODEWITHSUNDEEP
javascriptember.js
Pio
Pio

Reputation: 4064

Ember route not displaying template content

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 comes 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?

Upvotes: 2

Views: 3698

Answers (1)

Mike Grassotti
Mike Grassotti

Reputation: 19050

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?

Your application template does not have an {{outlet}}. With that in place it will work as expected.

See this jsbin for a working example.

Upvotes: 6

Related Questions