Default outlet in ember.js

Question

Today , I just start learning ember.js. I tried one sample application.

Search the result and it will show the list. Click on the link and it will show the result at right sidebar. It's working fine.

However, I want to show home template at first.

When I tried with {{outlet name}} , it can show the home template however it is not working when I click on link. So, is there any way to show default outlet ?

I found about default outlet at here . However, it need to remove my data-templte-name to show default outlet. I don't want to remove the data-template-name.

Current template is like following.

<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>

Kingpin2k Kingpin2k · Accepted Answer · 2014-02-02T17:56:14

The root template to be rendered is the application template (associated with the root/application level). An empty id/data-template-name is assumed to be the application template. If you want to use a different template for the application root you can create the application view and specify the templateName.

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

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

Default outlet in ember.js

1 Answers