Ember.js: How can I separate my views from my controllers?

Question

I am trying to restructure the closely related parts of the ember.js application, especially the views and templates for controllers.

All the examples that I saw connect views directly to controllers in the definition of the view class or pass the (global) path to the view in the template itself.

The TargetActionSupport mixer (DelegateSupport in sproutcore, I think) seems like a good candidate, but still requires the target (controller) and action to be set in the template itself.

Ideally, I would like to instantiate my views in my controller (somehow), set goals and actions, but also set the current variables in my templates (e.g. static classes, id), but I'm not sure how to do that this, or this is the right approach.

Answer 1

You can programmatically create instances and embed them in the DOM, wherever you want:

var view = Ember.View.create(); view.appendTo('#someElement'); 

If you want to eliminate global binding paths, you can pass a reference to the controller for presentation when instantiating:

 var controller = Ember.Object.create({content: {}}), view = Ember.View.create({ controller: controller, contentBinding: 'controller.content' }); 

I also suggest looking at the Ember StateManager.