How to import handlebars template in controller and place it in another handlebars template

Question

I am sorry if this question is silly. I have started working on front end with ember js and I am loving it. I am stuck at a point where I want to import a handlebars template in ember js controllers and attach it to div.

So How to import a handlebars template in controller and populate it and place it inside another handlebars template.

Here is my controller:

import Ember from 'ember';

export default Ember.Controller.extend({

    actions: {
    search: function() {
            alert("done");
          }
    }

});

here is the handlebars template:

<table class="table table-striped">
   <thead>
   <tr>
       <th>Name</th>
       <th>Mark</th>
       <th>Subject</th>
   </tr>
   </thead>
   <tbody>
   {{#each students}}
   <tr>
       <td>{{ this.name }}</td>
       <td>{{ this.mark }}</td>
       <td>{{ this.subject }}</td>
   </tr>
   {{/each}}
   </tbody>
 </table>

I have published the code on github and url is : https://github.com/focode/emberjs2/tree/master/app

Answer 1

My suggestion is to read the official tutorial again. In the tutorial, you will see that there is rarely use of the controller.

When you generate a router using ember-cli, ember g route routeName the correspond template is generated under template folder called routeName.hbs inside the template, there is a tag named {{outlet}} this is where the nested template goes.

For example, generate a nested route using ember g route routeName/nestedOne which gives you with another template called nestedOne.hbs inside template/routeName/nestedOne.hbs which actually goes inside the {{outlet}} in the privouse generated template routeName.hbs.

Ember use convention over configuration so that you do not need to manually import a template.

Recommend a beginner tutorial which covers a lot. It is free and update (last update is in late 2016).

https://leanpub.com/ember-cli-101