Question

I got confused while I was reading the explanation below on emberjs.com.

I typed the same code as the code below, but it doesn’t give me the same result as the explanation shows.

I think the explanation below is omitted to some extent, so that made me misunderstand and confused.

I want to know the complete code to get the same result shown below to understand fully what the explanations means.

I really appriciate if someone could show me the complete code to get the result shown below.

Thank you very much!

As you’ve already seen, you can print the value of a property by enclosing it in a Handlebars expression, or a series of braces, like this:

My new car is {{color}}.

This will look up and print the View’s color property. For example, if your view looks like this:

App.CarView = Ember.View.extend({
color: ‘blue’
});

Your view would appear in the browser like this:

My new car is blue.

you can aloso specify global paths:

My new car is {{App.carController.color}}.

By the way, here is the code I tried, which doesn’t get me the same result shown in the explation above.

/*----------
app.js
----------*/

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

App.CarView = Ember.View.extend({
    color: 'blue',
    templateName: 'car'
});

App.CarController = Ember.Controller.extend();


App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        })
    })
})

App.initialize();


/*----------
index.html
----------*/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
</script>

<script type="text/x-handlebars" data-template-name="car">
    My new car is {{color}}.<br />
    My new car is {{App.carController.color}}.
</script>

EDIT:

index.html

<script type="text/x-handlebars" data-template-name="application">

<!-- This Works -->  
{{#view App.CarView}}
    (1)My new car is {{view.color}}.<br />
{{/view}}

<!-- These don't Work -->
(2)My new car is {{view.color}}.<br />
(3)My new car is {{App.CarView.color}}.<br />

(4)My new car is {{App.CarController.color}}.<br />
(5)My new car is {{App.carController.color}}.<br />

<!-- this outlet-area shows what I have in my "car" template -->
{{outlet}}

</script>


<script type="text/x-handlebars" data-template-name="car">

<!-- This color property is defined in App.CarView.-->
(6)My new car is {{view.color}}.<br />

<!-- This color property is defined in App.CarCotroller.-->
(7)My new car is {{color}}.<br />

<!-- These don't work-->
(8)My new car is {{App.CarCotroller.color}}.<br />
(9)My new car is {{App.carCotroller.color}}.<br />

</script>

app.js

var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});


App.CarController = Ember.ObjectController.extend({ 
    color:'blue'
});

App.CarView = Ember.View.extend({   
    color:"blue",
    templateName: 'car'
});


App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets:function(router){
                router.get('applicationController').connectOutlet('car');
            }     
        })
    })
})

App.initialize();

Answer 1

Huh, there seems to be an error in the documentation. I will look to it, thanks for pointing it 🙂

Usually, when using {{color}} in the CarView template, it will lookup to the view’s context, which is its controller by default. The color property should be defined in the controller.

If you want define and refer a property from the view, then you have to use the view keyword in the template. In your example, {{view.color}} should work.

EDIT: Concerning the documentation, there is huge WIP see: https://github.com/emberjs/website/tree/doc-refactor. In particular your use case is not here anymore: https://github.com/emberjs/website/blob/doc-refactor/source/guides/templates/handlebars-basics.md

UPDATE: I think all you questions here are covered in this great instructions: http://trek.github.com/.

I think it should be enough to understand your points, but I can make short answers that may help you.

1 Works because you are explicitly creating a CarView here using the {{view}} helper, so using view.color is valid.

2 Does not work because your are in the scope of the ApplicationView, which has no color property

3 Does not work because color is a property of a CarView instance not on the CarView class

4 Same as 3

5 Ember.js instantiates controllers for you, but they are not properties of the App, but they are properties of the application’s router. So {{App.router.carController.color}} would work (BUT DONT USE IT, VERY BAD PRACTICE)

6 Works because your are in the CarView’s template, and a color property is defined in the CarView class (and then accessible in the current CarView instance)

7 Works because it refers the color property defined in the CarController class. As I said, Ember.js instantiates the controller at application initialization time. Later in your code, when calling router.get('applicationController').connectOutlet('car'); Ember.js will create an instance of the CarView class, connect it to the router.carController instance, and display it in the {{outlet}} of the ApplicationView’s template (because your are calling connectOutlet() on the applicationController. As a result, the rendering context of the CarView template is the carController, so when using {{aProperty}}, it means controller.aProperty, and in your case carController.color, which is ‘blue’

8 Same as 3

9 Same as 5

For your last question, as I said, you must never access staticly to the carController instance from the templates 🙂

Heh, I think that’s all