Ember.js recursive controllers and views

Question

Say I have a list of Action objects, which corresponds to a Ember model. Each has a few properties (timestamps) and a detail attribute, which can can recursively contain more details (arbitrarily deep nesting). You can think of the details as nested lists.

I want to write a UI that allows easy editing (auto completion of values, easy copy and paste, reorder elements, etc) of the detail for any Action object.

Right now, my DetailView template will recursively render additional DetailViews:

{{#if view.content.hasChildren}}
    {{#each child in view.content.children}}
       {{#DetailView contentBinding=child}}
    {{/each}}
{{#else}}
    {{#EditDetailView contentBinding=view.content.value}}
{{/if}}

So each DetailsView corresponds to a node in the Details object tree.

But I am unclear how to add controllers to the mix -- there is additional state I need to store / functionality to implement (e.g., transforming values from the Detail object for display in the DetailsView; handling events for inserting/deleting/reordering elements; changing the structure of the Details tree) that belongs neither in the model nor the view.

Ideally I would have a DetailsController serving as a proxy a Details per DetailsView. Can I dynamically instantiate controllers and set up their contents within a view template? My understanding of the new Ember Router is to setup controllers and outlets in in a given route; however, that doesn't seem to apply here because no routing is being done at all. All suggestions / insight about how to handle recursive controllers / views / routes welcome.

I've taken a look at EmberJS Nested Views and Controllers, but that proposes I have a single ArrayController for all Details, even across Actions ... this would not preserve the tree structure of the nested details either.

I've also looked at Recursive view in handlebars template not working after upgrading to Ember 0.9.6 but the solution doesn't say anything about controllers.

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-01-23T16:32:28

** UPDATE Feb 20, 2013 **

API documentation for the {{control}} helper is now available here. It warns that "The control helper is currently under development and is considered experimental."

To enable it, set ENV.EXPERIMENTAL_CONTROL_HELPER = true before requiring Ember.

** UPDATE Feb 3, 2013 **

A new helper {{control}} has been added to ember, implementing the Reusable Views proposal. So to have a DetailsController proxy a Details per DetailsView you can just:

{{control 'detail' child}}

See the {{control}} tests for example

Ideally I would have a DetailsController serving as a proxy a Details per DetailsView. Can I dynamically instantiate controllers and set up their contents within a view template?

Typically the way to do this would be via the handlebars {{render}} helper, which renders a template with an appropriate view and controller. Unfortunately you cannot use {{render}} to insert the same template more than once, so it cannot be used within an {{each}} block.

There was a lengthy discussion on the topic recently. See: Non-Singleton Controller Discussion!

Two solutions were proposed. The first involves adding an itemControllerClass property to ArrayController. If this property was set, the ArrayController would automatically wrap new contents in the specified class. This was added to ember a few weeks ago and takes care of most use cases, where you have a flat-list of items and want each to be wrapped in a proxy.

The second proposal, Reusable Views, allows you to provide a controller class to a view.

{{view UI.Calendar dateBinding="post.startDate" controllerClass="App.CalendarController"}}

This would create an instance of App.CalendarController for each UI.Calendar widget, which would be tied to the lifecycle of the widget. As of today this has not been implemented. See {{view}} should have an option to create a controller! for the latest status.

So AFAIK there is not a good way to accomplish this for the use case you outlined. Meantime, binding data to the view:

{{view App.DetailView contentBinding="child"}}

and then having some logic in the view itself seems reasonable. If/when Reusable View support is added to master you can pull that logic up into the controller.

See: https://github.com/emberjs/ember.js/issues/1766

Ember.js recursive controllers and views

1 Answers