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

我不熟悉Ember.js框架

我试图从框架中调用ajax，但没有得到预期的价值

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

下面是第页中的代码-

链接到第一个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>

以上章节-

我的控制器代码在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);
                }
            });
        });
      }
    });

我的数据文件是-

[
    {
        "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"
    }
]

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

---

当您单击视图并通过链接将模型传递到模型时，不会执行路线的模型部分，因为它已经知道模型

另外，一般来说，最好在模型中进行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;
  }
});

---

我已根据您的更新编辑了我的问题。但问题仍然没有解决。你能看完这段代码并给我一些指导吗？我必须补充一点，当ajax调用不能在return语句之前完成时，我不确定这将如何工作。您是否需要连接到模型对象本身而不是执行返回？@agmcleod您需要使用承诺才能使其正常工作。@PiyasDe我不确定问题出在哪里。我注意到的一点是，在find（param）中，您将content设置为item，但没有在中定义content属性result@Rudi我已经改变了对象的内容作为参数也。这也没有解决问题。无论如何，谢谢你的宝贵建议。

[
    {
        "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"
    }
]

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