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，我想你可以自己關閉它。

最好的問候， 邁克