Question

所以我努力让这个工作起来。也许我的做法并不好。我使用像ember.js这样的Frontend框架非常棒。

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

我正在尝试使用ember-CLI-charts，我需要在属性的最后几行返回该对象。

{% for path in widget.selected %}
    {% for selected in path %}
        {% for key, level in widget.depth_levels.items %}
            {% for key_obj in level %}
                {{ key_obj.name }}
                {{ key_obj.value }}
            {% endfor %}
        {% endfor %}
    {% endfor %}
{% endfor %}

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

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); }); JSON响应中获取JSON对象以将其传递给返回对象？

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

提前致谢！

Answer 1

更有意义的是创建一个服务，这样你就可以在许多控制器（或组件和模型）中使用你的getJson调用（用简单的话说＃34;使用＆＃34;），如果你愿意，每次都更改网址。在考虑使代码可重用时，这是有道理的。为此，您需要通过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（或者一种方式）编码的正确方法。

我意识到我需要将diff和date数据返回到模型中。所以我已经做到了。

路由/ 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')
        }
      ]
    }
  })

});

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

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

2 个答案: