EmberJS - RequireJS - 如何将视图/模板连接到一个子视图

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]

更新了github项目使用ember commit ea6922f（写入时4天大）
仍然没有工作提高更多estion :)
[/ EDIT＃5]

[EDIT＃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，但仍不能正常工作，补充说，它看起来可怕的错误去深的框架，有一些这种简单的工作（这也还是不能在我的情况） ，所以我真的觉得我错过了这里必不可少的东西。
[/编辑＃6]

Answer 1

这不是一个错误。 ContainerViews不会呈现模板。参见API文档Ember.ContainerView

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

如果你想渲染模板中的插座，你可以在Ember.View的子类中做到这一点，没有任何问题。但如上所述，这将无法用于ContainerView或CollectionView，因为这是Ember.ContainerView的子类。

我也对你的问题发表了评论：https://github.com/emberjs/ember.js/issues/1795#issuecomment-12453015，我想你可以自己关闭它。

最好的问候， 迈克