将 $.getJSON 对象传递给另一个 ember 控制器

Question

所以我正在努力让它发挥作用。也许我的方法不好。我非常不擅长使用像 ember.js.

这样的前端框架

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

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

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 对象并将其传递给 return 对象？

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

提前致谢！

Answer 1

创建一个服务更有意义，这样你就可以在许多控制器（或组件和模型）中使用（简单地说 "use"）你的 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。

然后回到你的控制器，你可以写类似的东西：

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

现在，在此控制器的车把文件中，您可以像这样从控制器访问数据：

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

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

这应该可以让您到达您想去的地方。它适用于我的机器。

Answer 2

所以最后我找到了在 ember 中编码的正确方法（或一种方法）。

我意识到我需要 return 差异和日期数据到模型中。所以我做到了。

routes/index.js

url = "log_hr24_diff.json";
var diff_data = Ember.$.getJSON(url, function(data){
    return Ember.Object.create(data);
});

url = "log_hr24_dates.json"
var dates_data = Ember.$.getJSON(url, function(data){
    return Ember.Object.create(data);
});

export default Ember.Route.extend({
  model(){
    return Ember.RSVP.hash({
      price: price_data,
      chart_diff: diff_data,
      chart_dates: dates_data
    });
  },
});

然后在主索引控制器文件中，只需使用此模型数据将 json 数据传递给正确的最终对象：

controllers/index.js

export default Ember.Controller.extend({
  applicationController: Ember.inject.controller('application'),

  diffData: Ember.computed('model', function(){
    return {
      labels: this.get('model.chart_dates'),
      datasets: [
      {
        label: "Difficulty",
        data: this.get('model.chart_diff')
        }
      ]
    }
  })

});

所以这对我来说是在 ember 上做事的正确方法。在模型中获取数据，将数据传递到控制器进行逻辑工作，最后将结果对象传递给视图。

将 $.getJSON 对象传递给另一个 ember 控制器

Passing $.getJSON object to another ember controller

javascript

json

object

ember.js