模板渲染在 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:index.html 中的Manager 模板

              <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);
          }
    )}

现在我的问题是当将新的经理数据呈现给经理时，它不会显示出来。 只有刷新后才会显示数据。

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

我在这里添加了完整的代码，并带有正确的标签顺序。

Answer 1

根据您的评论，不建议您这样做。您可以在路由 url 中传递 manager_id。我会给你非常基本的骨架，你可以做进一步的改变。请记住，如果您想从 ajax 设置模型数据，请在路由中使用 model 钩子

第一个路由器

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

所以这里用#/manager/all 显示所有经理列表 #/manager/:manager_id 显示带有 id manager_id 的经理

下一个经理所有路线

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

同样

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);
     })
    });
   }
});

接下来是经理模板

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

现在是经理的模板

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

Answer 2

您没有正确关闭每个标签。

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

此外，您还没有在上面给出的正确关闭 ManagerController。仔细检查。

 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);
        })
      }
)}