javascript - Emberjs 绑定(bind) Ember 对象中的属性

Question

我正在开发一个网络应用程序，它将使用 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 属性绑定(bind)到 Chart1 对象中的outdoorTemp 属性，但是此数据绑定(bind)似乎不起作用。我已经阅读了有关此事的文档，看起来我正在做的事情应该有效，但事实并非如此。这个问题有更优雅的解决方案吗？

Answer 1

这与你的嵌套结构有关。计算属性的作用域为本地对象，因此在这种情况下，您的别名适用于 label、fillColor 等...但无法到达其父级。

我创建了一个 ember twiddle 来演示这一点:

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 根属性设置为计算属性并返回对象，但这需要大量计算，仅关心单个更改，并且总体上可能会更昂贵。