Question

I’m following the tutorial here http://trek.github.com/ and I’m at a blocked point.

Ember code in index.html:

<script type="text/x-handlebars" data-template-name="application">
<h2>Ember Committers:</h2>
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="contributors">
{{#each person in controller}}
    {{person.login}}
{{/each}}
</script>

Ember code in app.js:

App = Ember.Application.create();

// Application default controller and view
App. ApplicationController = Ember.Controller.extend();
App.ApplicationView= Ember.View.extend( {
    templateName: 'application'
});

// Contributors controller and view...
App. AllContributorsController = Ember.ArrayController.extend();
App.AllContributorsView= Ember.View.extend( {
    templateName: 'contributors'
});

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                // Here we connect the allContributers data & template to the outlet in the application template.
                router.get('applicationController').connectOutlet('allContributors', [{login:'wycats'},{login: 'tomdale'}]);
            }
        })
    })      
});

At this point when I run it, I would expect to see the text “Ember Committers:” along with the two login names specified via connectOutlet().

I only see the header text and not the logins and I don’t get any errors.

Any ideas?

Answer 1

I’ve only had any success when I’ve done my routes the way they do on the emberjs.com guide page http://emberjs.com/guides/routing/defining-your-routes/

you’d define your routes via

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

At this point, it will by default if you go to #/contributors it will put the contributors template into the {{outlet}} (no view declaration necessary).

if you need to change the outlet, you would do it within the route (not router! that confusion cost me a day) by creating one for contributors:

App.ContributorsRoute = Ember.Route.extend({
    connectOutlets: ...
});