How to have an element load with the application in Ember.js - ember.js

Question

I am trying to create my first ember application but I can't have a template load with the application template:
Below is a simplified version of my layout:
<script type="text/x-handlebars">
{{outlet}}
</script>
How do I get the another template into the outlet section on page load?
Thanks in advance
For example if my second template is:
<script type="text/x-handlebars" id="yellow">
<p>Something</p>
</script>

Answer 1

#Marcio answer is correct, ember does create an implicit index route.
However the most important part here is that if you have, say a route like yellow that you want to be rendered inside the application's {{outlet}} (instead of the implicit index template) then you need to define a path for that route so the correspondent named template, (in your case yellow) will be rendered into the application's {{outlet}} instead of the implicit index:
App.Router.map(function() {
this.route('yellow', {path: '/'})
});
<script type="text/x-handlebars" data-template-name="application">
<h1>Hi</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="yellow">
<h2>Welcome from yellow</h2>
</script>
If you don't do this then ember will search for an index template to be rendered inside the outlet, and since you doesn't have one, nothing will be displayed. So again, by defining a path like "/" for your yellow route you instruct ember to use the yellow template instead of the index.
Of course, if you rename your yellow template to index then it will be picked up by ember and rendered inside the application outlet and you don't need to specify a path for the yellow route.
Example jsfiddle.
Hope it helps.

Answer 2

When you create a route like this:
App.Router.map(function() {
this.route('yellow')
});
and a transition is performed to yellow route.
For example, via {{#link-to 'yellow'}}Yellow{{/link-to}} or changing the url tohttp://www.yourhost.com#/yellow`
A handlebar template is appended in the dom, with the same name like the route:
<script type="text/x-handlebars" id="yellow">
<p>Something</p>
</script>
By default ember create a route('index') in your router mapping, like this:
App.Router.map(function() {
this.route('yellow')
// this.route('index', { path: '/' })
});
So creating a index template will work
<script type="text/x-handlebars" id="index">
Welcome
</script>
When the user navigate to the url http://www.yourhost.com, he will see Welcome.
See this demo http://jsfiddle.net/marciojunior/Db49u/