Ember js 鏈接模板包括

Question

我正在構建簡單的 Ember js 模板鏈接，因為我對 Ember 有點陌生，而且我來自 PHP 背景，所以我嘗試從 PHP 經驗中構建想法，將 ember 模板包含在另一個模板中，例如：

<script type="text/x-handlebars" id="top-nav">HTML HEADER</script>
<script type="text/x-handlebars" id="index">{{render 'top-nav'}} HTML body</script>

其背后的想法是我希望在每個 ember 模板中都包含“top-nav”模板。 我知道 {{outlet}} 在類似的情況下工作，但它不會提供只有幾行代碼的靈活性。

我的問題：是否有更合理的方式將模板插入模板？

謝謝你。

Answer 1

在另一個模板中插入模板的最佳方法就是使用視圖。

{{view 'top-nav'}}

定義您的模板，如：

<script type="text/x-handlebars" data-template-name="top-nav">
... template markup
</script>

然后在js中定義你的視圖

Ember.View.extend({
  templateName: 'top-nav',
});

就是這樣。 你可以在這里找到更多的文檔： http : //guides.emberjs.com/v1.10.0/views/inserting-views-in-templates/

編輯

正如@GJK 指出的那樣，如果您使用的是 Ember 1.13 或更高版本，則從 Ember 1.13 開始不推薦使用視圖，我建議您改用組件。

{{top-nav}}

組件的工作方式與視圖過去的工作方式類似。 您可以在此處找到有關它們的更多信息。 最終取決於您使用的 Ember 版本。

http://guides.emberjs.com/v2.0.0/components/

Answer 2

有沒有更合理的方式將模板插入到模板中？

這正是部分的用途。 您可以在此處閱讀有關部分模板的更多信息。 要點是您希望使用以_開頭的文件名創建可重用部分。 例如：

{{! _header.hbs }}
<header>
    <nav>...</nav>
</header>

然后，您可以使用{{partial 'header'}}將該代碼直接放入另一個模板（具有相同的上下文）。

話雖如此，在每個頁面上都有一個標題通常是應用程序模板最有用的場景。 您可以像這樣定義您的應用程序模板：

{{! application.hbs }}
<header>
    <nav>...</nav>
</header>

{{outlet}}

這將確保您的所有頁面都有您想要的標題，因為每個頂級模板都將在插座內呈現。

如果您在決定使用什么時遇到問題，請使用部分，直到遇到問題。 那時，您可能更有能力處理應用程序模板和復雜的模板結構。