Question

Say I had a template that was like:

<script type="text/x-handlebars" id="something">
    <div class="thisIsJustAnExample">Something I wanted in the template</div>
        {{outlet}}
    <div class="thisIsJustAnotherExample">Something else I wanted in the template</div>
</script>

And do the following in another template:

<script type="text/x-handlebars" id="thisThingPutsSomethingInSomething">
    <span>
        {{#partial "something"}}
            <div>Some stuff I want to go into the outlet...</div>
        {{/partial}}
    </span>
</script>

So the result is:

<div class="thisIsJustAnExample">Something I wanted in the template</div>
    <div>Some stuff I want to go into the outlet...</div>
<div class="thisIsJustAnotherExample">Something else I wanted in the template</div>

Is this possible?

Was it helpful?

Solution

Using a view this can be easily accomplished:

Parent Template and View

<script type="text/x-handlebars" data-template-name="foo">
  hello {{yield}} world
</script>


App.FooView = Em.View.extend({
  layoutName:'foo'
});

Usage

{{#view App.FooView}}
  {{item}}
{{/view}}

Example

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

OTHER TIPS

Just load the {{partial}} at the place of your {{outlet}}. You can achieve the final output.

Jsbin - Link

Note: Your partial template-name should begin with a "_" refer the link - Partial_naming_convention

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top