Creating complex static Markup with ember.js

Question

I am trying to render my application template, which is getting very complicated, so I want to split it up into separate <script type="text/x-handlebars"> 's

I think I want to use the {{view}} helper, but I don't know. Let's say I have this:

<script type="text/x-handlebars" data-template-name="application">
    <div id="wrapper" class="clearfix">

        <hgroup>
            <header>
                <div class="logo"></div>
                <h1 id="facilityName">{{facilityName}}</h1>
                <div id="sessionInfo">
                    <a id="userName">{{user}}</a>
                    <a id="logOut" href="../logout">log out</a>
                </div>
            </header>
        </hgroup>

        {{view App.breadcrumbsView}}
    </div>
</script>

And I want to load this next template inside of the one above:

<script type="text/x-handlebars" id="breadcrumbs">
    <div id="breadcrumbs">
        <p>
            <a href="{{breadcrumbObj.page}}">Network</a>

            {{#each breadcrumbObj}}
                <span>&#62;</span><a {{bindAttr href="link"}}>{{name}}</a>
            {{/each}}
        </p>
    </div>
</script>

Right now I am trying to do this with this code from my app.js

App.breadcrumbsView = Ember.View.create({
  templateName: 'breadcrumbs',
  breadcrumbObj: Util.breadcrumbs()
});

This is not working and I am getting Uncaught Error: assertion failed: Unable to find view at path 'App.breadcrumbsView'

Thanks

Answer 1

I think that you declared your App using var keyword. So it's not visible in handlebars template.

Change this

var App = Ember.Application.create();

To this

App = Ember.Application.create();

And you have to use extend instead of create when creating your views. Because ember will handle the object lifecycle like: create, destroy, add and remove binding etc.

Answer 2

@Marcio is right, you should .extend() and let the framework create it for you automatically by request. Furthermore when you extend the best practice is to use capitalized names like App.BreadcrumbsView .

See here a demo how it renders correctly doing it this way.

Hope it helps.