javascript - 将 $.getJSON 对象传递给另一个 ember Controller

Question

所以我正在努力让它发挥作用。也许是我的方法不太好。我对使用像 ember.js 这样的前端框架很菜鸟。

所以，我有一个 $.getJSON 请求，从本地文件获取 JSON 数据。问题是我需要将此数据传递给一个 ember Controller 内的另一个对象，而不是传递给模板。

我正在尝试使用 ember-CLI-charts 来返回属性最后几行中的对象。

diffData: Ember.computed('model', function(){

    let url = "log_hr24_diff.json";
    let diff_data = Ember.$.getJSON(url);         

    return {
      labels: ['Difficulty', 'Date'],
      datasets: [
      {
        label: "Difficulty",
        data: diff_data
        },
        {
        label: "Date",
        data: date_data
        }
      ]
    }
})

所以这不起作用。要么这样做:

let diff_data = Ember.$.getJSON(url).then(function(data){
   return Ember.Object.create(data);
});

那么如何从 diff_data JSON 响应中获取 JSON 对象并将其传递给返回对象？

尝试并搜索了很多，但找不到答案。

提前致谢!

Answer 1

创建一个服务更有意义，这样您就可以在许多 Controller (或组件和模型)中使用(简单地说“使用”)您的 getJson 调用，并分别更改 url时间，如果你愿意的话。 当考虑使代码可重用时，这是有意义的。 为此，您需要通过 CLI 提供服务。

Ember g service someServiceName

那么您的服务可能看起来有点像这样:

import Ember from 'ember';

export default Ember.Service.extend({
    getUrlData(url){

    let data = Ember.$.getJSON(url);

    return data.then((json) => {

      let records = [];
      json.forEach(function(item){        
        records.push(item);        
      });

      return records;
    });
  }

});

对于任何高级读者，我避免了解构(即 - 使用 const)以避免 OP 混淆。

回到 Controller 中，您可以编写类似于以下内容的内容:

import Ember from 'ember';

export default Ember.Controller.extend({

serviceToUse: Ember.inject.service('some-service-name'), 
diffData: Ember.computed('model', function(){   

    let url = "log_hr24_diff.json";
    let diff_data = this.get('serviceToUse').getUrlData(url);

        //parse returnedData or put it in a new variable to use as you see fit.
        return {
            labels: ['Difficulty', 'Date'],
            datasets: [
                {
                    label: "Difficulty",
                    data: diff_data
                },
                {
                    label: "Date",
                    data: date_data
                }
            ]
        }           
})

现在，在该 Controller 的 Handlebars 文件中，您可以像这样访问 Controller 中的数据:

{{diffData.labels}} //outputs "Difficulty,Date". You can loop through the datasets property yourself.

初学者提示 - 文件名应该相互匹配，这就是 Ember 知道如何链接文件的方式。这并不总是正确的，但现在请遵守该规则。

这应该可以带您到达您想去的地方。它可以在我的机器上运行。