將$ .getJSON對象傳遞給另一個余燼控制器

Question

所以我在努力使它起作用。 也許我的方法不好。 我對使用像ember.js這樣的Frontend框架很陌生。

因此，我有一個$ .getJSON請求，它從本地文件獲取JSON數據。 問題是我需要將此數據而不是傳遞給模板，而是傳遞給一個余燼控制器內的另一個對象。

我正在嘗試使用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

創建服務更有意義，那樣一來，您就可以在許多控制器（或組件和模型）中使用（用更簡單的詞“使用”）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知道如何鏈接文件的方式。 這不一定總是正確的，但現在請遵守該規則。

這樣可以將您帶到想要去的地方。 它可以在我的機器上工作。

Answer 2

所以最后我找到了在ember中編碼的正確方法（或一種實現方法）。

我意識到我需要將差異和日期數據返回到模型中。 所以我做到了。

路線/ 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數據傳遞給正確的最終對象：

控制器/ 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')
        }
      ]
    }
  })

});

所以這對我來說是在余燼上做事的正確方法。 在模型中獲取數據，將數據傳遞給控制器​​進行邏輯工作，最后將結果對象傳遞給視圖。