【发布时间】：2014-12-13 21:26:00
【问题描述】：
我希望 App.IndexRowController 成为三行视图的控制器。相反，Ember 将它们设置为普通对象。我相信我在 DataIndexController 中正确设置了 itemController。我是这个代码的一个版本，没有嵌套路由按预期工作。在处理嵌套路由/需求时，我需要做一些特别的事情吗？
JSBin：http://jsbin.com/sazafi/edit?html,css,js,output
要查看行为，请转到 #/data/index。请注意，有三个 li 元素，但没有相应的文本（来自 getName）。无法从行模板访问 getName 控制器属性。 Ember 文档说在 ArrayController 中设置 itemController 应该使该控制器可用于在 itemViewClass 中指定的模板。看一下 Ember Inspector，发现三个视图的控制器是 Ember.Object，而不是 App.IndexRowController。
JavaScript：
App = Ember.Application.create();
App.Router.map(function() {
this.resource("data", function() {
this.route("index")
});
});
App.DataIndexRoute = Ember.Route.extend({
model: function() {
return(
[
Ember.Object.create({name: 'row 1'}),
Ember.Object.create({name: 'row 2'}),
Ember.Object.create({name: 'row 3'})
]);
}
});
App.DataController = Ember.ArrayController.extend({
filter: ''
});
App.DataIndexController = Ember.ArrayController.extend({
needs: ['data'],
itemController: 'indexRow',
filter: Ember.computed.alias("controllers.data.filter"),
filteredContent: function(){
var filter = this.get('filter');
var list = this.get('arrangedContent');
return list.filter(function(item) {
return item.get('name').match(filter);
});
}.property('content', 'filter')
});
App.IndexRowController = Ember.ObjectController.extend({
// This method isn't accessible from the row template
getName: function() {
return(this.get('content').get('name'));
}.property()
});
App.DataIndexView = Ember.CollectionView.extend({
tagName: 'ul',
content: function(){
return this.get('controller.filteredContent')
}.property('controller.filteredContent'),
itemViewClass: Ember.View.extend({
controllerBinding: 'content',
templateName: 'row'
})
});
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Collection View</title>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"> </script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="app.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>CollectionView With Item View</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="data">
{{input type="text" placeholder='row 1' value=filter}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="row">
{{getName}}
</script>
</body>
</html>
编辑：我有一个工作示例，说明如何在 Ember.ContainerView 的子视图中设置控制器以及如何在此处过滤内容：https://github.com/mkolenda/ember-listview-with-filtering。 ListView 是 ContainerView 的后代。
【问题讨论】：
标签： ember.js