Question

As an example, one particular application state may have a home view that just renders some background container,

App.EditView = Ember.View.extend({
      templateName:  'edit-template',
 })


App.EditController = Ember.ObjectController.extend({
      title: 'Edit state',
})

Which are instantiated when I navigate to this state:

App.editRouter = Ember.Route.extend({

    route: '/edit',

    connectOutlets: function( router, context ){           
        router.get('applicationController').connectOutlet( 'mainOutlet', 'edit' )
    }
})

Once here, the user may manually declare new div elements which map to new view and controller ( and model but that’s no super relevant here ), the new div may or may not be a child of the div rendered by editView.

The current way I’m doing it

App.smallView1 = App.SmallView.create({ 
     controller: App.smallController1
}).append()

App.smallController1 = App.SmallController.create()

As you see, nothing here indicates under what state are the view and controller declared.
What I’m confused about:

What is the relationship between this view-controller pair and the instance of EditView and EditController?

What is the relationship between the pair and the editRouter?

Should there be dependancies that need to explicitly specified?

Answer 1

This view-controller pair doesn’t seem to be used by the router, so you’d have to create a route for them and connect the outlet with your view-controller pair, unless you want to append this view to an element that won’t change per route. It also doesn’t have any relationship with the other view-controller pair.

As for your questions:

What is the relationship between this view-controller pair and the
instance of EditView and EditController?

A: The code, as it stands, presents no direct relationship between the small view and controller with edit view and controller, but the difference is that the pair EditView and EditController are not “created”, but “given” to the application, which will take care of instantiating that type when required through its own initialization logic (initialize) or when creating the instance of a view when it’s required. The pair smallView1 and smallController1 will probably not be good for the router as their instance names end with “1” and I’m not sure if Ember expects that, but anyway, these are being instantiated and directly attached to the application as “living” objects, which is not required when using the router. Does this answer your question?

What is the relationship between the pair and the editRouter?

A: In your code, editRouter is the definition of what state (since Route extends State) your application is when you are on that route; this means that the framework understands that when you are on a given state you need some specific things to occur, for example, loading the view that state requires, loading the data that view should display, etc… this is done through connectOutlet, so for this particular route you don’t have any relationship of any kind with smallView1 or smallController1 unless you use a different signature of connectOutlet to specify the viewClass and controller manually.

Should there be dependancies that need to explicitly specified?

A: Yes. When using the Router, your application must have a controller named ApplicationController, and when you call connectOutlet, the name you pass must be corresponding to one view and controller (I think the controller might not me required, but I’m not sure at the moment). So if you say connectOutlet('about'), the framework will look for a view named AboutView as per convention, then will instantiate this view and render on the appropriate outlet in the container view.

How will the controller access the router if it needs to?

A: At any point in your application you can access the router with App.router assuming your application is named “App” and your router was named “Router”, so in any of your methods in your controller you can, for example, use the router to transition: App.router.transitionTo('root.index.home').