CODEWITHSUNDEEP
ember.js
Toran Billups
Toran Billups

Reputation: 27399

How to use itemControllerClass to achieve a singleton like experience with ember.js

I've got a fairly simple form but it should never carry any state with it. I started reading an older discussion about how you can use itemControllerClass to get a "singleton" class created each time you enter the route.

If I want to use this how would I plug this into the template and wire it up from the parent controller?

Here is what I'm guessing you would do from the javascript side

App.FooController = Ember.Controller.extend({
    itemControllerClass: 'someclass_name'
});

The only "must have" is that I need to have access to the parent route params from the child singleton controller.

Any guidance would be excellent -thank you in advance!

Update

Just to be clear about my use case -this is not an ArrayController. I actually just have a Controller (as shown above). I don't need to proxy a model or Array of models. I'm looking for a way to point at a url (with a few params) and generate a new instance when the route is loaded (or the parent controller is shown).

I'm doing this because the template is a simple "blank form" that doesn't and shouldn't carry state with it. when the user saves the form and I transition to the index route everything that happened in that form can die with it (as I've cached the data in ember-data or finished my $.ajax / etc)

Anyone know how to accomplish this stateless behavior with a controller?

Upvotes: 0

Views: 128

Answers (2)

Adam
Adam

Reputation: 3158

I'm betting you're talking about this discussion. It's one of my personal favorite discoveries related to Ember. The outcome of it was the itemController property of an ArrayController; I use it all the time. The basic gist of it is, when you're iterating over an array controller, you can change the backing controller within the loop. So, each iterating of the loop, it will provide a new controller of the type you specify. You can specify the itemController as either a property on the ArrayController, or as an option on the {{#each}} handlebars helper. So, you could do it like this:

App.FooController = Ember.ArrayController.extend({
  itemController: 'someclass'
});

App.SomeclassController = Ember.ObjectController.extend({});

Or, like this:

{{#each something in controller itemController='someclass'}}
...
{{/each}}

Within the itemController, you can access the parent controller (FooController, in this case), like: 

this.get('parentController');

Or, you can specify the dependency using needs, like you ordinarily would in a controller. So, as long as the params are available to the parentController, you should be able to access them on the child controller as well.

Update

After hearing more about the use case, where a controller's state needs to reset every time a transition happens to a particular route, It sounds like the right approach is to have a backing model for the controller. Then, you can create a new instance of the model on one of the route's hooks; likely either model or setupController.

Upvotes: 2

iyer
iyer

Reputation: 23

From http://emberjs.com/api/classes/Ember.ArrayController.html

Sometimes you want to display computed properties within the body of an #each helper that depend on the underlying items in content, but are not present on those items. To do this, set itemController to the name of a controller (probably an ObjectController) that will wrap each individual item.

For example:

{{#each post in controller}}
 <li>{{title}} ({{titleLength}} characters)</li>
{{/each}}

App.PostsController = Ember.ArrayController.extend({
  itemController: 'post'
});

App.PostController = Ember.ObjectController.extend({
// the `title` property will be proxied to the underlying post.

 titleLength: function() {
 return this.get('title').length;
 }.property('title')
});

In some cases it is helpful to return a different itemController depending on the particular item. Subclasses can do this by overriding lookupItemController.

For example:

App.MyArrayController = Ember.ArrayController.extend({
lookupItemController: function( object ) {
if (object.get('isSpecial')) {
  return "special"; // use App.SpecialController
} else {
  return "regular"; // use App.RegularController
   }
 }
});

The itemController instances will have a parentController property set to either the the parentController property of the ArrayController or to the ArrayController instance itself.

Upvotes: 0

Related Questions