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绑定属性

回答

相关问题