Ember對象中的Emberjs綁定屬性

我正在使用ember-cli-chart（ChartJS包裝器）在Web應用程序中顯示圖表中的一些時間序列數據。我使用socket.io發送當前數據到Web應用程序來顯示。Ember對象中的Emberjs綁定屬性

socket.on('timeSeriesData', function(data){ 
    chart1.set('outdoorTemp', data); //Sets data on signal from socket.io 
}); 

var chart1 = Ember.Object.create({ 
outdoorTemp: null, //This variable is successfully set on the signal above 
data: { 
    labels: [], //Don't need labels for now 
    datasets: [ 
     { 
      label: "Energy Consumption in KW/H", 
      fillColor: "rgba(219, 66, 0, .25)", 
      strokeColor: "rgba(209, 0, 0, 1)", 
      pointColor: "rgba(209, 0, 0, 1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(209, 0, 0, 1)", 
      data: Ember.computed.alias('outdoorTemp') //This value does not get set to outdoorTemp 
     } 
    ] 
}, 
options: { 
    responsive: true, 
    maintainAspectRatio: false, 
    scaleFontColor: '#fff', 
    scaleShowGridLines: false, 
    scales: { 
     yAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'probability' 
      } 
     }] 
    } 
}});

我的目標是每次從socket.io接收到新數據時，圖形應該實時更新。我試圖將數據屬性綁定到chart1對象內的outdoorTemp屬性，但是此數據綁定似乎不起作用。我已經閱讀了關於這個問題的文檔，看起來我正在做的事情應該可以工作，但事實並非如此。會不會有一個更優雅的解決方案來解決這個問題？

來源

2016-12-02 Alec Beyer

這與您的嵌套結構有關。計算出來的屬性的範圍是本地對象，所以在這種情況下，你的別名可以用於label,fillColor等等，但不能到達它的父母。

我創建餘燼玩弄演示此：

https://ember-twiddle.com/a91df745677ba49b5d12c9575d7dca19?openFiles=controllers.application.js%2C

我還示出了其中使用觀察者設置的值時玩弄的溶液。您也可以直接嘗試設置它，但也許中間功能設置有助於推斷數據如何發送。

// called on init, and for any subsequent changes 
setDynamic: Ember.on('init', Ember.observer('appName', function() { 
     this.set('nested.observed', this.get('appName')); 
}))

Ember中的觀察者可能是危險的，特別是當他們觀察跨越邊界的事物時。這個觀察者是本地的，並且只設置了沒有被觀察到的數據，所以這不是觀察者最糟糕的用例。可能有一個更好的解決方案，不使用觀察者或在socket.on上設置值，但至少這在Ember的「數據下降，操作上」的想法之後。

您可以使整個data根屬性成爲一個計算屬性並返回該對象，但這只是關注單個更改的大量計算，並且可能整體上會更加昂貴。

來源

2016-12-02 19:13:49

謝謝！這解決了我遇到的問題，但揭示了一個新問題。由於socket.io函數中的數據未被更改，所以觀察者從不被觸發。當收到socket.io信號時，chart1.set（'outdoorTemp'，data）;似乎並沒有真正改變這個值，因爲它總是讀爲空。不知道爲什麼會這樣。 –

它在'chart1'餘燼對象上讀取爲null？或者它從socket.io中讀取爲null？ Ember通過使用'.set（）'來觸發更改，看起來就像你正在做的那樣。我已經更新了twiddle以在5秒後更改appName，這表明觀察者仍然觸發。基本上，只要確保你的套接字io回調中有一個新的值。 –

因爲我可以運行chart1.get（'outdoorTemp'），因此outdoorTemp值似乎已設置，它將返回正確的數據。問題似乎是，無論出於何種原因，觀察者都沒有注意到這種變化從未執行過。我已經注意到你的代碼和我的代碼之間的一個區別是，我正在做一個燼對象，而你的代碼在控制器中執行它。這可能是一個問題嗎？ –

Ember對象中的Emberjs綁定屬性

回答

相關問題