模型函数中未生成来自 ajax 请求的渲染数据

Question

我正在制作一个简单的应用程序，在该应用程序中我一遍又一遍地进行相同的 ajax 调用（使用 setInterval），它不是由用户进入路线触发的，而是通过单击触发 setInterval 开始的按钮来触发的.因此，我不会使用通过移动到路由中触发的 model 挂钩来获取数据，因为该挂钩仅被调用一次，然后模板会自动呈现。相反，我在控制器中有一个 jsonRequest 函数，该函数由 startInterval 函数一遍又一遍地调用。因此，模板中的数据不会像model 挂钩那样自动呈现。因此，一旦在每个 ajax 请求后返回我的数据，我希望将其附加到列表中，或者以某种方式将其添加到 index.html，但我找不到使用 Ember 的 api 执行此操作的方法。请求返回后如何向 index.html 中添加数据（我不想将其称为view，因为我还没有创建view）？

App.IndexController = Ember.Controller.extend({

      jsonRequest: function(){
        var datasource = 'http://localhost:8080';
        return new Ember.$.ajax({url: App.Index.url, dataType: "json", type: 'GET'}).then(function(data){  
              console.log(data)     

        })
      },
     startInterval: function(){
          console.log("startInterval");
         App.Index.setIntervalId = setInterval( this.jsonRequest, (1000));
     }


   App.Index = Ember.Object.extend({
    url: "",
    setIntervalId: "",

  });

   App.IndexRoute = Ember.Route.extend({

     model: function(){
       return App.Index.create();
   },

这里有一个 jsbin，显示了当我尝试将来自 ajax 调用的数据添加到索引控制器上的 objects 属性时引发的错误（如 SO 用户 Buck 所建议的那样）。 bin 没有显示在模板中循环遍历objects 的尝试，因为我们从来没有走到那一步http://emberjs.jsbin.com/bomilowiha/1/edit?html,css,js,console,output

Answer 1

您可以将收到的数据转换为 Ember.Object 并将其添加到控制器属性中。

示例控制器代码：

Ember.Controller.extend({
  objects: [],
  jsonRequest: function() {
     Ember.$.ajax({/* your request */}).then(function(data) {
       var object = /* code to turn the data into an object for display */;
       this.get('objects').pushObject(object);
     }.bind(this));
  }
});

然后在您的模板中，您可以遍历模型数组：

{{#each object in objects}}
  display object properties here
{{/each}}

具体如何将 JSON 转为对象进行显示，以及如何显示该对象，取决于您的需求。