Свойства связывания Emberjs в объекте Ember

Question

Я работаю над веб-приложением, которое отображает некоторые данные временных рядов на графике с использованием ember-cli-chart (обертка ChartJS). Я использую socket.io для отправки текущих данных в веб-приложение для отображения.

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. Я пытаюсь связать свойство данных с свойством outdoorTemp в объекте chart1, однако это привязка данных не работает. Я прочитал документацию по этому вопросу, и похоже, что я работаю, но это не так. Было бы более элегантное решение этой проблемы?

Answer 1

Это связано с вашей вложенной структурой. Вычисленное свойство привязано к локальному объекту, поэтому в этом случае ваш псевдоним будет работать для 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')); 
})) 

Наблюдатели в Эмбер могут быть опасны, особенно когда они наблюдают за тем, что пересекает границы. Этот наблюдатель является локальным и только устанавливает данные, которые, в свою очередь, не соблюдаются, поэтому это не худший вариант использования наблюдателя. Может быть лучшее решение, которое не использует наблюдателя или не устанавливает значение на socket.on, но, по крайней мере, это несколько следует за идеей «данные вниз, действия вверх» Эмбера.

Вы можете сделать все корневое свойство data вычисленным и вернуть объект, но это много вычислений, которые касаются только одного изменения и, вероятно, будут более дорогими в целом.