Emberjs綁定Ember對象中的屬性

Question

我正在開發一個Web應用程序，它將使用ember-cli-chart（ChartJS包裝器）在圖表中顯示一些時間序列數據。 我正在使用socket.io將當前數據發送到要顯示的Web應用程序。

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收到新數據時都應該實時更新圖表。 我試圖將data屬性綁定到chart1對象中的outdoorTemp屬性，但是這個數據綁定似乎不起作用。 我已經閱讀了有關此事的文檔，看起來我正在做的事情應該有效，但事實並非如此。 這個問題會有更優雅的解決方案嗎？

Answer 1

這與您的嵌套結構有關。 計算屬性的范圍限定為本地對象，因此在這種情況下，您的別名將適用於label ， fillColor等...但無法訪問其父級。

我創造了一個咒語旋風，演示了這個：

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

我還在twiddle中展示了一個解決方案，它使用觀察者來設置值。 您也可以嘗試直接設置它，但也許中間功能設置有助於推斷數據的發送方式。

// 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上的socket.on ，但至少這有點遵循Ember的“數據下降，行動起來”的想法。

您可以將整個data根屬性設置為計算屬性並返回該對象，但這只是為了關注單個更改而進行的大量計算，並且總體上可能更昂貴。