如何在没有容器对象的情况下在每个循环中呈现视图？

hekevintran 发表于 Dev

Hekevintran

我有一个控制器，该控制器的属性是子控制器的数组。每个子控制器都有我要呈现的view属性。这段代码抛出错误：

{{#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

曼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');
});