如何在Ember中以编程方式执行ArrayController[index]
How to programmatically perform ArrayController[index] in Ember?
我知道如何通过特定属性(this.findBy(prop, value)
)查找项。我知道如何从底层数组模型(this.get("model")[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>
如果这个嵌入的东西不起作用,请在jsbin上镜像。
我尝试过的东西:
this.get(1)
this.get("1")
this.get("this.1")
this.get("this.[1]")
this.get("this[1]")
到目前为止运气不好。
如果不能做到这一点,我至少可以通过底层模型找到项目,然后以某种方式使用它来找到它的ItemController包装版本吗?
要通过索引获得物品控制器,可以使用controllerAt
setNewValue: function () {
var index = this.get("atIndex");
this.controllerAt(index).set("isPrimary", true);
}
更新的jsbinhttp://emberjs.jsbin.com/yajipogive/1/edit
相关文章:
- Ember.js ArrayController usage
- ArrayController排序-每条语句-模型
- 通过访问Ember.ArrayController获取话语中徽章的列表
- 如何在Ember中以编程方式执行ArrayController[index]
- 如何对Ember Model支持的ArrayController进行排序
- 如何从ArrayController访问ItemController
- ArrayController 在 Ember 中的意义何在.js
- 如何使用 Ember-CLI 在 ArrayController 中获取 Ember-Data 值
- 什么是ArrayController.itemController的ObjectController类似物
- 如何在 Ember.js 中从一个 ArrayController 的选定值更新另一个 ArrayController
- EmberJS: ArrayController -> ArrayController -> ObjectC
- 循环遍历 ArrayController 失败,因为它不是数组,即使控制器具有正确的数据模型也是如此
- 当ArrayController重新排序时,Ember itemController将被重新实例化
- Ember.js无法设置ArrayController的内容
- 如何对arraycontroller中的子对象进行排序
- 在这种情况下,当我更新arrayController内容时,余烬将重新渲染DOM中的所有li
- Emberjs从ArrayController填充Ember下拉框
- ArrayController属性返回字符串字面量
- 找出在Ember ArrayController中哪个单独的项目发生了变化
- 在Ember中,我如何在ArrayController的内容被修改后更新视图