Question

今天，我开始学习ember.js。我试过一个示例应用程序。

搜索结果，它将显示列表。单击链接，它将在右侧边栏显示结果。它工作正常。

但是，我想首先显示主页模板。

当我tried与{{outlet name}}时，它可以显示主页模板，但是当我点击链接时它不起作用。那么，有没有办法显示默认出口？

我在here找到了默认插座。但是，它需要删除我的data-templte-name以显示默认插座。我不想删除data-template-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

ember.js中的默认出口

1 个答案: