Ember.js - 渲染到插座的默認模板？

Question

所以我有一個如下所示的頁面

[ Nav Bar ]

|         |
| Content |
|         |

導航欄我希望在所有頁面中保持不變。 所以我使用的方法是將我的頁面設置如下：

[ Nav Bar ]

{{outlet}}

這很棒，我現在可以將不同的頁面呈現在不同路線的插座中。

但是如果我想將默認模板渲染到我的主頁的插座中呢？

我已經設法通過重定向/到/home來實現這一點，但必須有一個更好的方法來做到這一點，這允許我在/沒有重新路由時呈現默認主頁？

任何建議贊賞，

謝謝，丹尼爾

Answer 1

要在根頁面/ {{outlet}}中呈現內容，您必須為index定義處理程序欄腳本：

您的導航欄代碼可能如下所示：

<script type="text/x-handlebars">
  <div class="navbar ...">
    ...
  </div>

  {{outlet}}
</script>

將放置在{{outlet}}內的根頁面是以下內容：

<script type="text/x-handlebars" id="index">
    <div class="container">
      <h1>Root page!!</h1>
    </div>
</script>

換句話說，您必須創建一個具有id =“index”的手柄腳本。

應該管用。 它不需要任何js代碼。

Answer 2

我必須承認這個屬性沒有很好地記錄並隱藏在Ember.View的文檔中，但您可以嘗試在ApplicationView上設置defaultTemplate屬性。 有關詳細信息，請參閱此處 （在“defaultTemplate”頁面中搜索）。

希望能幫助到你。

Answer 3

文檔中的以下聲明幫助我解決了問題中所述的完全相同的問題： Ember路由文檔

索引模板將呈現到應用程序模板中的{{outlet}}。 如果用戶導航到/ favorites，Ember將使用收藏夾模板替換索引模板。

當我在我的項目中使用pod結構時，我創建了一個具有我的默認模板的索引路徑，並在我的application / template.hbs文件中放置了nav-bar組件。

應用程序/應用/ template.hbs：

<div id="pageWrapper">
    <div id="navbarfixed">{{nav-bar options=options}}</div>
    <div id="pageContent">
        {{outlet}}
    </div>
</div>

應用程序/索引/ template.hbs

<div id="homeWrapper"> <!--This gets rendered by default in outlet above-->
Some default content of outlet
</div>