Вычисляемые значения по умолчанию с Ember 2.0

Question

С Ember 2.0 в моделях didInsertElement существует устаревшая модификация свойств. Следующий сценарий создает проблему при попытке интеграции других сторонних библиотек, в данном случае d3.

У меня есть компонент, который обертывает визуализацию d3, имеющую как tagName: svg. Существует два свойства, которые передаются от родителя к этому компоненту, width и height. Наблюдатели по этим двум свойствам в компоненте d3 обновляют визуализацию, чтобы реагировать на изменения размера окна.

Проблема возникает в родительском компоненте. Я в настоящее время привязан к событию resize , запущенному Ember.run и обратному вызову, который устанавливает свойство windowSize в компоненте. У меня есть два рассчитанных свойства, которые зависят от windowSize, ширины и высоты, которые вычисляются в соответствии с шириной и высотой DOM (которые являются динамическими благодаря столбцам в бутстрапе). Таким образом, вычисляемые свойства выглядеть следующим образом:

halfWidth: Ember.computed('windowSize', function() { 
    return $(this.get('halfSelector')).first().width(); 
}) 

Однако при прохождении вычисленного свойства компонента d3 в {{d3-component width=halfWidth}} нет по умолчанию. Это вычисляемое свойство вычисляется только при запуске события изменения размера окна. Если я изменил размер окна, компонент d3 корректно обновится с новой шириной.

didInsertElement() { 
    $(window).on('resize',() => { 
    Ember.run(() => { 
     this.set('windowSize', $(window).width()); 
    }); 
    }); 
    // In order have the computed properties to have defaults, one could do 
    // $(window).trigger('resize') 
    // However this line is responsible for raising the deprecation notice. 
} 

Как предоставить вычисленному свойству значение по умолчанию, которое зависит от ширины узла DOM после того, как компонент был вставлен в DOM?

Answer 1

Для того, чтобы избавиться от устаревания, я изменил определение didInsertElement на следующее:

didInsertElement() { 
    let onWindowResize =() => { 
    this.set('windowSize', $(window).width()); 
    }; 

    $(window).on('resize',() => { Ember.run(onWindowResize); }); 
    Ember.run.scheduleOnce('afterRender', onWindowResize); 
} 

Я получил вдохновение от https://github.com/emberjs/ember.js/issues/11493. На эту проблему также ссылались Forcing layout calculations to use in further positioning. Чтобы избежать устаревания свойств уставок в крюке didInsertElement, для планирования изменения используется очередь afterRender.