Question

Ember has a Application which has ApplicationView, ApplicationController and ‘application’ named template and ‘main’ named outlet and all these connect automatically.
eg.

App.ApplicationView = Ember.View.extend();

and

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

so whenever my application template renders its default controller is an automatic instance of

App.ApplicationController

whose properties i can access in the template. But why does it not works with other views and controllers, i.e. if I have

App.SongView = Em.View.extend()

and
App.SongController = Em.Controller.extend()
these two do not connect. I can use any property of

App.SongController

in my song template.
I can use like :

{{view App.SongView}}

and in the template:

<script type='text/x-handlebars' data-template-name='song'>
    {{name}}
</script>

and if i have a name property in App.SongController then it wont get picked up because its not connected to the View.
although i can do it like this

{{view App.SongView controllerBinding='App.songController'}}

but this requires the instance of App.songController in my js file and also using this approach we are hard-coding the controller to the template.
What is the best way for this?

Update
I am also attaching a js fiddle for my problem here:
http://jsfiddle.net/anshulguleria/K6KPJ/

Answer 1

If you want to render a template and its associated controller and view, you can use the {{render}} template. It works similarly to this.render in the router.

{{render "song" song}}

This example will render the song template with an instance of App.SongController and App.SongView. It will set the song controller’s model to the value of song in the current context.

Here is a working JSBin that illustrates how this works.