javascript - 如何在没有容器对象的情况下在每个循环中渲染 View ？

Question

我有一个 Controller ，它有一个属性，它是一个子 Controller 数组。每个子 Controller 都有一个我要渲染的 View 属性。这段代码抛出错误:

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

如果我将子 Controller 包装到看起来像 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

Handlebars 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