Как программно выполнить ArrayController [index] в Ember?

Question

Я знаю, как найти товар по конкретному объекту (this.findBy(prop, value)). И я знаю, как получить голый элемент из базовой модели массива (this.get("model")[index]).

Но как я могу получить полностью обернутую модель ItemController по определенному индексу, если у меня есть ссылка на ArrayController?

Чтобы сделать его более ясным, вот пример массива расширенных цветов, который демонстрирует, что мне нужно.

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>

В случае, если это внедренный вещь не работает, mirror on jsbin.

Что я пробовал:

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

Не повезло до сих пор.

Если это невозможно, можно ли, по крайней мере, найти элемент через базовую модель, а затем каким-то образом использовать это, чтобы найти его заверенную версию ItemController?

Answer 1

Чтобы получить контроллер элемента по индексу вы можете использовать controllerAt

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

Обновлено jsbin http://emberjs.jsbin.com/yajipogive/1/edit