Question

我有一个控制器，它有一个属性，它是一个子控制器数组。每个子控件都有一个我想渲染的视图属性。这段代码抛出一个错误：

{{#each subcontrollers}}
    {{view this.view}}
{{/each}}

如果我将子控件包装成看起来像Ember.Object.create({key: subcontroller})的对象，那么这段代码可以正常工作：

{{#each subcontrollerContainers}}
    {{view this.key.view}}
{{/each}}

实现此目的的另一种方法是使用CollectionView：

{{#collection subcontrollerCollection}}
    {{view view.content.view}}
{{/collection}}

这对我来说似乎违反直觉。 {{view this.view}}和{{view this.key.view}}之间的真正区别是什么？ CollectionView究竟做了哪些不同的事情？

这是我的JSBin：http://emberjs.jsbin.com/tuxob/7/edit

jQuery 1.10.2

把手1.2.1

Ember 1.1.2

HTML：

<script type="text/x-handlebars" data-template-name="subcontroller_template">
    foo
</script>
<script type="text/x-handlebars" data-template-name="controller_template">
    {{! This piece of code throws an error}}
    {{!--
    {{#each subcontrollers}}
        {{view this.view}}
    {{/each}}
    --}}

    <p>subcontrollerContainers:</p>
    {{#each subcontrollerContainers}}
        {{view this.key.view}}
    {{/each}}

    <p>subcontrollerCollection:</p>
    {{#collection subcontrollerCollection}}
        {{view view.content.view}}
    {{/collection}}
</script>

JavaScript的：

App = Ember.Application.create();

var TemplatedViewController = Ember.Object.extend({
    templateFunction: null,
    viewArgs: null,
    viewBaseClass: Ember.View,
    view: function () {
        var controller = this;
        var viewArgs = this.get('viewArgs') || {};
        var args = {
            template: controller.get('templateFunction'),
            controller: controller
        };
        args = $.extend(viewArgs, args);
        return this.get('viewBaseClass').extend(args);
    }.property('templateFunction', 'viewArgs'),
    appendView: function (selector) {
        this.get('view').create().appendTo(selector);
    },
    appendViewToBody: function () {
        this.get('view').create().append();
    },
    appendPropertyViewToBody: function (property) {
        this.get(property).create().append();
    }
});

var Subcontroller = TemplatedViewController.extend({
    view: function () {
        var controller = this;
        return this.get('viewBaseClass').extend({
            controller: controller,
            templateName: 'subcontroller_template'
        });
    }.property()
});

var Controller = TemplatedViewController.extend({
    view: function () {
        var controller = this;
        return this.get('viewBaseClass').extend({
            controller: controller,
            templateName: 'controller_template'
        });
    }.property(),
    subcontrollers: null,
    init: function () {
        var subcontrollers = [];
        subcontrollers.pushObject(Subcontroller.create());
        subcontrollers.pushObject(Subcontroller.create());
        subcontrollers.pushObject(Subcontroller.create());
        this.set('subcontrollers', subcontrollers);
    },
    subcontrollerContainers: function () {
        var that = this;
        return this.get('subcontrollers').map(function (item, index, enumerable) {
            return that.createSubcontrollerContainer(item);
        });
    }.property('subcontrollers.@each'),
    createSubcontrollerContainer: function (subcontroller) {
        return Ember.Object.create({key: subcontroller});
    },
    subcontrollerCollection: function () {
        return Ember.CollectionView.extend({
            content: this.get('subcontrollers')
        });
    }.property('subcontrollers')
});

var controller = Controller.create();

$(function () {
    controller.appendView('#main');
});

Answer 1

检查一下。似乎有一个名为“view”的属性与ember命名约定冲突。查看此工作链接。我刚刚将计算属性“view”更改为“conView” http://emberjs.jsbin.com/zowat/1/edit

如何在没有容器对象的每个循环中渲染视图？

1 个答案: