javascript - Ember.js Ajax 调用未按预期工作

Question

我是 Ember.js 框架的新手。

我试图从框架进行 ajax 调用，但没有获得预期的值。

下面是页面中的代码-

链接到第一个 ajax 调用，它按预期工作。

{{#linkTo listemployee class="span3 btn btn-large btn-block"}}Employees{{/linkTo}}

调用数据填充表格 -

App.ListemployeeRoute = Ember.Route.extend({
        setupController: function(controller) {
        $.getJSON('data/Tutorials.json', function(data) {
            controller.set('content',data);
        });
      }
    });

以及数据模板 -

<script type="text/x-handlebars" data-template-name="listemployee">
  <h3 class="demo-panel-title">This is the list for Employee</h3>
  <table border=2>
    <tr><td><b>Name</b></td><td><b>Address</b> </td><td><b> Phone</b></td><td colspan=3>Action<td></tr>
    {{#each item in content}}
      <tr><td>{{item.name}}</td><td>{{item.address}} </td><td> {{item.phone}}</td><td> {{#linkTo viewemployee item.name}}View{{/linkTo}} </td><td>Edit</td><td>Delete</td></tr>
    {{/each}}
   </table>
</script>

以上内容按预期工作。

但是当我点击

{{#linkTo viewemployee item.name}}View{{/linkTo}}

对于上述部分 -

我的 Controller 代码位于 App.js 中 -

App.Router.map(function() {
      this.route("listemployee", { path: "/employees" });
      this.resource("viewemployee", {
        path: "/employees/:name"
      });
    });

我的ViewemployeeRoute是

App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return {name: params.name};
      },
      setupController: function(controller, model) {
        $.getJSON('data/Tutorials.json', function(data) {
            data.forEach(function(item){
                if(item.name === model.name)
                {
                    var tabledata = '<table border = \"1\" ><tr><td>Name</td><td>'+item.name+'</td></tr><tr><td>Address</td><td>'+item.address+'</td></tr><tr><td>Phone</td><td>'+item.phone+'</td></tr></table>';
                    $('#employeetable').html(tabledata);
                    controller.set('content',item);
                }
            });
        });
      }
    });

我的模板代码是 -

<script type="text/x-handlebars" data-template-name="viewemployee">
  <h3 class="demo-panel-title">This is the View Employee template</h3>
  <div id = "employeetable">

  </div>
</script>

问题 -

当我第一次点击查看链接时，没有显示该员工的数据。

但是当我刷新页面时，数据会按预期出现。

我认为问题是，当我单击View链接时，来自ajax的响应会在页面呈现后稍后出现。

那么，我应该在代码中做什么，以便在单击View链接时获得员工相关详细信息？

感谢这方面的任何帮助。

谢谢。

尝试答案后更新 2。但仍然会出现同样的结果。

我已将我的 app.js 更改如下 -

App.ListemployeeRoute = Ember.Route.extend({  
        model: function() {
            return App.Employee.findAll();
        }
    });

    App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return App.Employee.find(params);
      }
    });

    App.Employee.reopenClass({
      findAll: function() {
        var result = Ember.ArrayProxy.create({content: []});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
            result.set('content', data);
          },
          error: function(xhr, textStatus, errorThrown) {
            alert('error');
          }
        });
        return result;
      },
      find: function(params) {
        var result = Ember.Object.create({content: null});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
                data.forEach(function(item){
                    if(item.name === params.name)
                    {
                        result.set('content', item);
                    }
                });
            },
          error: function(xhr, textStatus, errorThrown) {
            alert('not found');
          }
        });
        return result;
      }
    });

我的数据文件是 -

[
    {
        "name": "John",
        "address": "John's Home",
        "phone": "John's Phone"
    },
    {
        "name": "Harry",
        "address": "Harry's Home",
        "phone": "Harry's Phone"
    },
    {
        "name": "Tom",
        "address": "Tom's Home",
        "phone": "Tom's Phone"
    }
]

我们可以在这里找到工作 -

http://www.phloxblog.in/ember-crud-ajax/

Answer 1

当您单击 View 并通过 #linkTo 传递模型时，您的路线的模型部分不会执行，因为它已经知道该模型。

此外，作为一般规则，最好在模型中进行 ajax 调用，而不是在路由中。

App.ProjectsIndexRoute = Ember.Route.extend({  
  model: function() {
    return App.Project.findAll();
  }
});

App.Project.reopenClass({
  findAll: function() {
    var result = Ember.ArrayProxy.create({content: []});
    var self = this;
    $.ajax({
      url: '/projects.json',
      type: 'GET',
      data: {'user_id': App.currentUser.id},
      success: function(data, textStatus, xhr) {
        result.set('content', data.projects);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('error');
      }
    });

    return result;
  },

  find: function(project_id) {
    var result = Ember.Object.create({content: null, isLoaded: false});
    var self = this;
    $.ajax({
      url: '/projects/' + project_id + '.json',
      type: 'GET',
      success: function(data, textStatus, xhr) {
        result.setProperties(data.project);
        result.set('isLoaded', true);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('not found');
      }
    });

    return result;
  }
});