[SOLVED]Ember.js: How to make children (handlebar) templates display in the parent (handlbar) template?

Ember Data
1

Lately I have been reading through the ember documentation and following as best I can. I have made good progress which I thank God for, but lately I have had troubles with routing. Specifically I can get templates to display in the application template but I cannot get children routes to display in the parent resource’s handlebars template. Instead the child template actually replaces it. Here’s my code:

App.js

    window.App = Ember.Application.create();
//App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.Router.map(function(){
    this.route('workspace');
    this.resource('modals',function(){
        this.route('layout');
        this.route('visuals');
        this.route('finish');
        this.route('preview');
    });
});

App.Store = DS.Store.extend({
    revision: 13
  , adapter: "DS.FixtureAdapter"
});
//=============== Routes ==================
App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('workspace');
    }
});
App.ApplicationRoute = Ember.Route.extend({
    //model: function(){
        //return this.store.find('alerts');
        
    //}
});
App.ModalsRoute = Ember.Route.extend({
  //model: function(){ 
    //return App.Alerts.find();
  //}
});
App.WorkspaceRoute = Ember.Route.extend({
    //model: function() {
        //return ['item1', 'item2', 'item3'];
        //return App.Alerts.find();
    //}
});
App.ModalsLayoutRoute = Ember.Route.extend({
   //model: function() {
        //return ['item1', 'item2', 'item3'];
        //return App.Modal.find();
    //}
    
});
App.ModalsVisualsRoute = Ember.Route.extend({
   //model: function() {
        //return ['item1', 'item2', 'item3'];
        //return App.Modal.find();
    //}
    
});
App.ModalsFinishRoute = Ember.Route.extend({
   //model: function() {
        //return ['item1', 'item2', 'item3'];
        //return App.Modal.find();
  // }
    
});
App.ModalsPreviewRoute = Ember.Route.extend({
  // model: function() {
   //     return ['item1', 'item2', 'item3'];
        //return App.Modal.find();
   // }
    
});
//=============== Controllers ==================

//=============== Models ==================
App.Alerts = DS.Model.extend({
    title: DS.attr("string"),
    description: DS.attr("string"),
    icon: DS.attr("string")
});

//=============== Fixtures ================
App.Alerts.FIXTURES = [
    {id:1,title:'Missing Header',description:'There must be a header section on each page',icon:'icon-eye'},
    {id:2,title:'Missing Main',description:'There must be a Main section on each page',icon:'icon-eye'}
];

index.html

<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="modals">
        <h2>Modals Parent Route</h2>
        <p>This is the modals route which is common to all modals</p>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="modals/layout">
       <h2>Layout Route</h2>
       
    </script>
    <script type="text/x-handlebars" data-template-name="modals/visuals">
       <h2>Visuals Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/finish">
       <h2>Finish Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/preview">
       <h2>Preview Route</h2>
    </script>

so instead of index.html#/modals/preview displaying:

<h2>Modals Parent Route</h2>
<p>This is the modals route which is common to all modals</p>
<h2>Preview Route</h2> <!--where the outlet tag used to be-->

All I get is:

<h2>Preview Route</h2>

It’s almost as if it is using the “application” templates {{outlet}} instead of the “modals” template {{outlet}}

Please help me out with this, Thanks

2

I think the issue is the resource route. I’d consider to change it to a simple route. But to be completely honest I can’t explain why it happens.

3

I copied your code to a jsbin and it seems to work fine so it doesnt seem to be a problem with the code you posted. Maybe try adding route/controller logic to the jsbin to see where it breaks?

http://jsbin.com/ruredanege/1/

this.resource works fine but I have seen some mentions that it will be deprecated in the future.

4

Thank you two very much for your replies.And I am very great full that you tested my code out on jsbin. I wanted to try that out but unfortunately jsbin renders without any CSS styles in my browser (which is very odd). Any way I have sEtup ember-cli and copied your working code example from jsbin into my ember-cli workspace but unfortunately it still doesn’t work for me. I have noted two major differences however between my cli code and the code from the bin. Ember data is being imported and I’m using plain old ember instead of the ember.debug.js. Could one of you guys please tell me how I can add my own .js files to the index.html in ember-cli?

5

My first recommendation is to read through the ember-cli.com website but pay particular attention to the application layout and Modules sections.

That should guide you through moving from the old single page - globals style - structure to the new ember-cli style. JS Bin examples use the globals style, unfortunately there isnt (yet?) a good way to share ember-cli style mockups.

Just on the inserting .js into index.html though, ember-cli will collect all your routes/controllers/models and templates into the assets/ember-app.js file for you.

1 Like