How to programmatically perform ArrayController[index] in Ember?

Question

I know how to find an item by a specific property ( this.findBy(prop, value) ). And I know how to get the bare item from the underlying array model ( this.get("model")[index] ).

But how do I get the fully ItemController wrapped model at a specific index if I have reference to an ArrayController?

To make it clearer, here's an extended colors array example that demonstrates what I need.

 App = Ember.Application.create(); App.Router.map(function() { // put your routes here }); function color(name, value) { return Ember.Object.create({name: name, value: value || name}); } App.IndexRoute = Ember.Route.extend({ model: function() { return [ color("red"), color("green"), color("yellow"), color("purple") ]; } }); App.IndexController = Ember.ArrayController.extend({ itemController: "color", atIndex: 2, actions: { setNewValue: function () { var index = this.get("atIndex"); alert("How to find collor itemController #" + index + " from here?"); } } }); App.ColorController = Ember.ObjectController.extend({ _isPrimary: null, isPrimary: function (_, newValue) { if (newValue) { this.set("_isPrimary", newValue); } var value = this.get("_isPrimary"); return value || ["red", "green", "blue"].indexOf(this.get("name")) >= 0; }.property("name"), style: function () { return "color: " + this.get("value") + ";"; }.property("value") }); 

 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script> <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script> <script type="text/x-handlebars"> <h2>Welcome to Ember.js</h2> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each item in this}} <li {{bind-attr style=item.style}}> {{item.name}} {{#if item.isPrimary}} (primary) {{/if}} </li> {{/each}} </ul> <hr /> <button type="button" {{action setNewValue}}>Set as primary</button> <label>at index: {{input value=atIndex}}</label> </script> 

In case this embedded thing doesn't work, mirror on jsbin .

Things I've tried:

• this.get(1)
• this.get("1")
• this.get("this.1")
• this.get("this.[1]")
• this.get("this[1]")

No luck so far.

If this can't be done, can I at least find the item through underlying model and then somehow use that to find its ItemController wrapped version?

Answer 1

To get an item controller by index you can use controllerAt

setNewValue: function () {
  var index = this.get("atIndex");
  this.controllerAt(index).set("isPrimary", true);
}

Updated jsbin http://emberjs.jsbin.com/yajipogive/1/edit