如何以編程方式在Ember中執行ArrayController [index]？

我知道如何通過特定屬性找到物品（this.findBy(prop, value)）。而且我知道如何從底層陣列模型（this.get("model")[index]）獲取裸設備。如何以編程方式在Ember中執行ArrayController [index]？

但是，如果我有一個ArrayController的引用，如何在特定索引處獲得完整的ItemController包裝模型？

爲了說明清楚，下面是一個擴展的顏色數組示例，演示了我需要的內容。

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包裝版本？

來源

2015-02-11 panta82

要通過索引獲得一個項目的控制器，你可以使用controllerAt

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

更新jsbin http://emberjs.jsbin.com/yajipogive/1/edit

來源

2015-02-11 20:38:19

YES！就是那個。我不知道這個控制器的所有功能都存在。謝謝！ – panta82 2015-02-11 20:40:43

不客氣。樂意效勞！ – 2015-02-11 20:41:49

'controllerAt'是一種無證方法嗎？ API搜索找不到任何東西。 – 2015-02-15 22:15:17

如何以編程方式在Ember中執行ArrayController [index]？

回答

相關問題