template rendering is not working properly in ember js

Question

        I am very new to Ember js. when i route one template to another it working properly.but the problem is when i was render same template it won't work.

        My code is follows:

index.html:Manager template in index.html

              <script type="text/x-handlebars" data-template-name="manager">
             {{#each model.manager}}
             <div class="pure-g-r content-ribbon">
                      <div class="pure-u-1-3">
                          <div class="img-viewer-profile">
                              <img {{bindAttr src="image"}}>
                          </div>
                      </div>
                      <div class="pure-u-2-3">
                          <div class="l-box">
                            <h4 class="content-subhead">{{name}}</h4>
                            <table class="pure-table">
                              <tbody>
                                <tr class="pure-table-odd">
                                  <td>Id</td>
                                  <td><b>ATL-{{id}}</b></td>
                                </tr>
                                <tr class="pure-table-odd">
                                  <td>Team</td>
                                  <td><b>{{team}}</b></td>
                                </tr>
                                <tr>
                                  <td>Division</td>
                                  <td><b>{{division}}</b></br>
                                </tr>
                                <tr class="pure-table-odd">
                                  <td>Manager</td>
                                  <td>
                                   <b>
                                   <a href="#" {{action "managerinfo" manager_id}}>
                                    {{manager_name}}
                                    </a>
                                   </b>
                                  </td>
                                </tr>
                                {{/each}}
                                    <tr>
                                    <td>Reportees</td>
                                  <td>
                                  {{#each model.results}}
                                  <br><b>
                                       <a href="#" {{action "profileinfo" id}}>
                                       {{reportees}}
                                       </a>
                                  </b></br>
                                  {{/each}}
                                  </td>
                                  </tr>
                              </tbody>
                            </table>
                          </div>
                      </div>
                  </div>
                {{outlet}}
          </script>

 app.js:
=========
        App.ManagerController = Ember.ObjectController.extend({

      manager_id: '',
      id: '',
      actions:{
       managerinfo: function(manager_id) {
          // the manager id of selected manager field
          var manager_id = manager_id;
          alert("profile");
          alert(manager_id);

          managerdata = $.ajax({
            dataType: "json",
            url: "/manager?manager_id=" + manager_id,
            async: false}).responseJSON

          managerdata.manger_id = manager_id;
          console.log(managerdata);
          this.transitionToRoute('manager', managerdata);
          }
    )}

Now my problem is when render the new manager data to manager it wont be displayed. After refresh only it shows the data.

    what mistake i was done in this code , i dont understand.so please provide me solution.

i added my complete code here with proper tags order.

Answer 1

As per your comment, the way you are doing is not suggested. You can pass manager_id in the route url. I will give you very basic skeleton which you can make further changes. Do remember, if you want to set model data from ajax, use model hook in the route

First Router

App.Router.map(function() {
  this.resource("managers", function(){
    this.route("all");
    this.route("manager", { path: "/:manager_id" });
  });
});

So here with #/manager/all displays all managers list #/manager/:manager_id displays manager with id manager_id

Next ManagerAll route

App.ManagersAllRoute = Ember.Route.extend({
  model: function() {
    //do ajax and return managers data which sets as model for this route
  }
});

sameway

App.ManagersManagerRoute = Ember.Route.extend({
  model: function(params) {
    //do ajax and return managers data which sets as model for this route
    //here params will have the manager_id passed through url
    //as it is ajax, create a promise
    return new Ember.RSVP.Promise(function(resolve, reject) {
        Ember.$.ajax({
        dataType: "json",
        url: "/manager?manager_id=" + params.manager_id,
        async: false}).then(function(data){
          resolve(data);
     })
    });
   }
});

Next is template for managers

{{#each model.manager}}
    {{#link-to 'managers.manager' manager_id}}{{{manager_name}}{{/link-to}}
{{/each}}

Now a template for manager

{{manager_id}}
{{manager_name}} blah blah blah

Answer 2

You didn't close the each tag properly.

<script type="text/x-handlebars" data-template-name="manager">
{{#each model.manager}}
    <a href="#" {{action "managerinfo" manager_id}}>
       {{manager_name}}
    </a>
{{/each}}       
</script>

Also you haven't closed the ManagerController correctly in the given above. Double check that.

 App.ManagerController = Ember.ObjectController.extend({

  manager_id: '',
  id: '',
  actions:{
   managerinfo: function(manager_id) {
      // the manager id of selected manager field
      var self=this;
      var manager_id = manager_id;
      alert("profile");
      alert(manager_id);

      managerdata = $.ajax({
        dataType: "json",
        url: "/manager?manager_id=" + self.manager_id,
        async: false}).responseJSON.then(function(managerdata) {
            managerdata.manger_id = self.manager_id;
            console.log(managerdata);
            this.transitionToRoute('manager', managerdata);
        })
      }
)}