ember.js中的默認出口

Question

今天，我才開始學習ember.js。 我嘗試了一個示例應用程序。

搜索結果，它將顯示列表。 單擊鏈接，它將在右側欄顯示結果。 一切正常。

但是，我想首先顯示主頁模板。

當我嘗試使用{{outlet name}} ，它可以顯示主頁模板，但是當我單擊鏈接時它不起作用。 那么，有什么方法可以顯示默認插座嗎？

我在這里找到有關默認插座的信息 。 但是，它需要刪除我的data-templte-name才能顯示默認出口。 我不想刪除數據模板名稱。

當前模板如下。

<script type="text/x-handlebars" data-template-name="dictionary">

    <div id="left">
        <header>
            <div id="topheader">
                <img src="images/logo.jpg" class="logo">
                <i id="search-icon">&nbsp;</i>
               {{input type="text" id="query" placeholder="Search"  value=query
               action="query"}}
            </div>
        </header>
        <div id="results">
                {{#each results}}
              {{#link-to "detail" this}}
                  <section>
                <div class='detail'>
                <div class='word'>{{Word}}</div>
                <div class='state'>{{state}}</div>
                <div class='def'>{{def}}</div>
                </div>
                </section>
               {{/link-to}}
                {{/each}}
        </div>
        <footer>
            <div id="bottom">
                <a href="#" class='btn'>Login</a>
                <a href="#" class='btn add'>Add</a>
            </div>
        </footer>
    </div>
     <div id="right">
     {{outlet}}
     </div>


</script>

<script type="text/x-handlebars" id="detail">
    <div id="details">
          <div class='word'>{{Word}}</div>
          <div class='state'>{{state}}</div>
          <div class='def'>{{def}}</div>
    </div>
    <div id="discuss">
    </div>

</script>

<script type="text/x-handlebars" id="home">
  <div id="homeScreen">
        Sample home screen

  </div>
</script>

Answer 1

要呈現的根模板是application模板（與根/應用程序級別相關聯）。 空id / data-template-name被假定為application模板。 如果要為應用程序根目錄使用其他模板，則可以創建應用程序視圖並指定templateName 。

App.ApplicationView = Ember.View.extend({
  templateName: 'foo'
});

http://emberjs.jsbin.com/EZocURAR/1/edit