emjer.js view not reading context

Question

I have the following js, based on the emberjs.com routing tutorial. The var 'wontAppear' wont map in the corrsponding view.

Quiz = Em.Application.create({
ApplicationView: Ember.View.extend({
    templateName: 'App'
}),
IntroSettings : Ember.Object.extend(),
ApplicationController: Ember.Controller.extend({
    titlebar: 'My New App',
}),

IntroView: Ember.View.extend({
    templateName: 'Intro'
}),
IntroController: Em.ObjectController.extend({ house: "2" }),

CountDownView: Ember.View.extend({
    templateName: 'CountDown',
    didInsertElement: function () {
        this.$().hide().show('drop', { direction: "right" }, 200);
    },
}),
CountDownController: Em.ObjectController.extend({

}),

Router: Em.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('body','Intro');
            },
            countDown: Ember.Route.transitionTo('countDown')
        }),
        countDown: Ember.Route.extend({
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('body', 'CountDown',     { wontAppear: "5" });
            }
        })
    })
})
});


Quiz.initialize();

the views are setup thus :

    <script type="text/x-handlebars"  data-template-name="App">
    <div id="quiz-container">
        <div id="headerPanel">
            <div class="title">{{titlebar}}</div>
            <div class="timerDiv"> </div>
            <div class="timerDivText"></div>
        </div>
        {{outlet body}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="Intro">
    <div id="introPanel">
        <img id="helpimg" src="images/helpimage.jpg" />
        <button id="startButton" {{action "countDown" on="click"}}>Start Game</button>
    </div>
</script>

<script  type="text/x-handlebars" data-template-name="CountDown">
    <div class="countdown">
        {{wontAppear}}
    </div>
</script>

The only way i can get data to appear in the view is to add it to the application controller. I thought as the countdown view would get the data from it's corresponding countdownController?

Answer 1

I think you (and the sample you're reading in the primer) are missing a newly added property in the Application namespace.

Ember now automatically starts the app on its own, so you don't need to call App.initialize() (Quiz.initialize() in you case), however, if you want/need to, you can set the autoinit of your app to false and you won't have any trouble calling App.initialize(). If you don't set it to false and call the initialize, Ember will throw an exception saying that you can't call initialize multiple times.

Another thing, naming/casing conventions do matter when you're working with any Framework, it's not different with Ember, so your connectOutlet should be something like this:

// ... other code
// note that "countDown" starts with a lower cased "c"
router.get('applicationController')
      .connectOutlet(
          'body', /* outlet name*/
          'countDown', /* view/controller pair name in cammelCase */
          { wontAppear: "5" } /* your context object*/
      );
// ... other code

Your app will still throw an error:

Uncaught TypeError: Property '#' of object # is not a function

But I'm not sure what that's about, I was just trying to solve this particular issue with the call of connectOutlet in your countDown route.

See a fiddle of this example