Question

由于EmberJS演变得非常快，所以问题再次出现：）

[编辑]
我正在使用github的EmberJS。这是我正在使用的版本 https://github.com/emberjs/ember.js/tree/c87ad9fc13f7883e7b898c9fb9b1630cb2fc9bf1
[/编辑]

这个问题是后续问题 EmberJS - Manually bind controller to view
但是你不需要阅读它来理解以下问题。

我有一个EmberJS应用程序，我正在使用requireJS为路由器路由到的应用程序部分加载我的控制器和视图。

我的主index.html有一个{{outlet}}，其中将添加ApplicationView 我的ApplicationView有3个子视图 - 标题，菜单和容器 - 如下所示

require
(
    [
        'app/app',
        'app/common/views/menu',
        'ember'
    ],
    /**
     * Main application view
     *
     * @param App
     */
    function (App)
    {
        App.ApplicationView = Ember.ContainerView.extend
        ({
            childViews   : ['headerView', 'menuView', 'containerView'],
            headerView   : App.HeaderView,
            menuView     : App.MenuView,
            containerView: App.ContainerView
        });
    }
);

我的ContainerView如下

require
(
    [
        'app/app',
        'text!app/common/templates/container.hbs',
        'ember'
    ],
    /**
     * View to clear completed tasks
     *
     * @param App
     * @param template
     */
    function( App, template )
    {
        App.ContainerView = Ember.View.extend
        ({
            template: Ember.Handlebars.compile( template ),
            what: 'container view'
        })
    }
);

和它的模板这样 [编辑]
模板位于自己的app / common / templates / container.hbs文件中。我不想在html中用脚本标签定义模板 [/编辑]

<div id="container" class="container">
    my main content !!!
    {{outlet}}
</div>

现在我有了一条路线，在那里我想将模板/视图渲染到容器主插座中（我也尝试命名插座）。

我希望在我的路线中有类似的东西。请注意，控制器和视图以前没有加载过，现在必须在执行函数之前由requireJS加载。

define
(
    [
        'app/app',
        'app/library/controllers/library',
        'app/library/views/main',
        'ember'
    ],
    function (App)
    {
        App.LibraryRoute = Ember.Route.extend
        ({
            setupControllers: function(controller, model)
            {
                this.set('controller', this.container.lookup('controller:library') );
            },

            renderTemplates : function()
            {   
                this.render
                (   'library',
                    {
                    //  can I specify the view like so? 
                    //  It seems not as the container view is not part of the active views. 
                    //  can I specify the view like so?How to add it to the activeViews?
                    //  into: 'container',

                    //  I also tried to do
                    //  outlet: 'container'
                    //  with the outlet in the container template beeing named container, this doesn't work either
                        controller: this.controller
                    }
                );

//                This is what I am aiming for in the future, meaning loading resources only if the user is navigating to those
/*                require
                 (
                 [
                     'app/library/controllers/library',
                     'app/library/views/main',
                     'app/library/models/library'
                 ],
                 function()
                 {
                    // render template / view
                 )*/
            }
        })
    }
);

LibraryView就像这样

require
(
    [
        'app/app',
        'text!app/library/templates/main.hbs',
        'ember'
    ],
    /**
     * View to clear completed tasks
     *
     * @param App
     * @param template
     */
    function( App, template )
    {
        App.LibraryView = Ember.View.extend
        ({
            template: Ember.Handlebars.compile( template ),
            what :'library view'
        });
    }
);

此视图的控制器就像这样

require
(
    [
        'app/app',
        'ember'
    ],
    /**
     * Library controller
     */
    function(App)
    {
        App.LibraryController = Ember.ArrayController.extend
        ({
            needs: 'menu',
            content: []
        });
    }
)

问题可以恢复到这个如何将视图/模板连接到子视图的出口（在应用程序初始化之前或之后加载，DOM已加载）？

我在GitHub上创建了一个回复https://github.com/zeflasher/ember-require-js，供您检查代码，并帮我修复此问题。

非常感谢您提供的任何帮助！干杯，泽维尔

[编辑＃4]
当我指定我的模板时，我想知道我的问题是否与其中一个错误有关 https://github.com/emberjs/ember.js/commit/712e2b62f79577b84630a99e80c043f751a67fe4
https://github.com/emberjs/ember.js/commit/9bcc0cd87c587affc0e60030b2dac1174f820dbf
[/编辑＃4]

[编辑＃5]
更新了github项目以使用ember commit ea6922f（写作时4天）仍然没有工作提出更多的问题:)
[/编辑＃5]

[编辑＃6]
我更新了github回购。
现在，当应用程序是具有插座的普通视图时，一个分支（working-no-containerview）在插座中呈现我的视图。

主分支是非工作示例（在容器模板/视图出口中不呈现任何内容）。我虽然因为在尝试连接插座时子视图不是_activeViews的一部分它会失败，所以我甚至尝试使用ApplicationView中的以下代码将我的子容器视图添加到活动视图中/>

require
(
    [
        'app/app',
        'app/common/views/menu',
        'ember'
    ],
    /**
     * Main application view
     *
     * @param App
     */
    function (App)
    {
        App.ApplicationView = Ember.ContainerView.extend
        ({
            childViews   : ['headerView', 'menuView', 'containerView'],
            headerView   : App.HeaderView,
            menuView     : App.MenuView,
            containerView: App.ContainerView,
            init: function()
            {
                App.__container__.lookup('router:main')._connectActiveView('container', App.__container__.lookup('view:container'));

                this._super();
            }
        });
        return App.ApplicationView;
    }
);

将它添加到activeViews，但仍然无法正常工作，并补充说，在框架中深入了解这个简单的工作（这仍然不在我的casE中）看起来非常错误，所以我真的我觉得我错过了一些必不可少的东西 [/编辑＃6]

Answer 1

这不是错误。 ContainerViews根本不呈现模板。请参阅Ember.ContainerView

的api文档

容器视图上的template，templateName，defaultTemplate，layout，layoutName或defaultLayout属性不会导致呈现模板或布局。 Ember.ContainerView的DOM表示的HTML内容将只是其子视图的呈现HTML。

如果要在模板中渲染插座，可以在Ember.View的子类中执行此操作而不会出现任何问题。但如上所述，这不适用于ContainerView，也不适用于CollectionView，我认为这是因为它是Ember.ContainerView的子类。

我也对您的问题发表评论：https://github.com/emberjs/ember.js/issues/1795#issuecomment-12453015我认为您可以自行关闭它。

祝你好运，麦克

EmberJS - RequireJS - 如何将视图/模板连接到子视图的插座

1 个答案: