为什么没有在子视图中设置项目控制器

我希望 App.IndexRowController 成为三行视图的控制器。相反，余烬将它们设置为普通对象。我相信我在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 的后代。

简单的解决方案是使用 {{each}} 而不是 CollectionView 。

这是数组控制器

、项控制器和集合视图的 Ember 设计中一个众所周知的"功能"，也称为设计错误。在网上找到有关该问题的参考资料以及一些建议的黑客/解决方法应该不会太难。您可以从 https://github.com/emberjs/ember.js/issues/4137 或 https://github.com/emberjs/ember.js/issues/5267 开始。

相关内容

最新更新

热门标签：