Question

我希望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的后代。

Answer 1

简单的解决方案是使用{{each}}代替CollectionView。

这是一个众所周知的＆＃34;功能＆＃34;，又名设计错误，在Ember设计中用于阵列控制器，项目控制器和集合视图。在网上找到关于问题的引用并且一些建议的黑客/解决方法不应该太难。您可以从https://github.com/emberjs/ember.js/issues/4137或https://github.com/emberjs/ember.js/issues/5267开始。

为什么itemController没有在子视图中设置？

1 个答案: