Übergeben von $ .getJSON-Objekt an einen anderen Ember-Controller

Question

Also habe ich Mühe, dies zur Arbeit zu bringen. Vielleicht ist mein Ansatz nicht gut. Ich bin ziemlich ein Anfänger bei der Verwendung eines Frontend-Framework wie ember.js.

Also, ich habe eine $ .getJSON Anfrage erhalten eine JSON-Daten aus einer lokalen Datei. Das Problem ist, dass ich diese Daten weitergeben muss, nicht an die Vorlage, sondern an ein anderes Objekt innerhalb eines Ember-Controllers.

Ich versuche, Ember-CLI-Diagramme zu verwenden, um das Objekt in den letzten Zeilen der Eigenschaft zurückzugeben.

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

Das funktioniert also nicht. Entweder dies zu tun:

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

Also wie bekomme ich das JSON-Objekt aus der diff_data JSON-Antwort an die Rückkehr Objekt zu übergeben?

Ich habe es versucht und gesucht, konnte aber keine Antwort finden.

Vielen Dank im Voraus!

Answer 1

Es macht mehr Sinn, einen Service, dass die Art und Weise erstellen Sie (in einfacheren Worten „Verwendung“) Ihre getJSON Anruf innerhalb viele Controller (oder Komponenten und Modelle) verbrauchen kann, und ändern sich jedes Mal, wenn die URL, wenn Sie möchten . Es macht Sinn, wenn Sie Ihren Code wiederverwendbar machen. Um dies zu tun, sollten Sie einen Dienst über das CLI einrichten.

Ember g service someServiceName 

Dann wird Ihr Service könnte ein wenig so aussehen:

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

}); 

Für alle fortgeschrittenen Leser, ich habe Destrukturierung vermieden (dh - mit einem const) Verwirrung für den OP zu vermeiden.

in Ihrem Controller und zurück, Sie etwas Ähnliches schreiben kann:

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

nun in der Lenker Datei für diesen Controller können Sie die Daten von Ihrem Controller wie so zugreifen:

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

Anfängerhinweis - Dateinamen sollten übereinstimmen, so weiß Ember, wie man Dateien verbindet. Das muss nicht immer wahr sein, aber bleib jetzt bei dieser Regel.

Dies sollte Sie dahin bringen, wohin Sie wollen. Es funktioniert auf meiner Maschine.

Answer 2

So endlich fand ich den richtigen Weg, um es in Ember (oder eine Möglichkeit, es zu tun) zu kodieren.

Ich erkannte, dass ich die diff und date Daten in das Modell zurückgeben muss. Also ich habe das getan.

Routen/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 
    }); 
    }, 
}); 

dann in den Hauptindex Controller Datei verwenden nur diesem Modell Daten, die die json Daten an den richtigen endgültigen Objekt zu übergeben:

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

}); 

Also das ist für mich eine korrekte Art, Dinge auf Glut zu tun. Abrufen von Daten im Modell, Übergeben von Daten an den Controller für logische Workarounds und schließlich Übergeben des resultierenden Objekts an die Ansicht.