Question

我是Ember.js框架的新手。

我正在尝试使用框架进行ajax调用，而不是按预期获得值。

以下是Page -

中的代码

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

以上部分 -

我的控制器代码在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链接时，员工的数据不会出现。

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

我认为问题是，当我点击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

单击视图并通过#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;
  }
});

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

1 个答案: