Ember 2.0 的默认计算属性答案

【问题标题】：Default computed properties with Ember 2.0Ember 2.0 的默认计算属性
【发布时间】：2015-08-21 14:22:53
【问题描述】：

在 Ember 2.0 中，不赞成修改组件的 didInsertElement 挂钩中的属性。以下场景在尝试集成其他第三方库（在本例中为 d3）时会出现问题。

我有一个包装 d3 可视化的 ember 组件，具有 tagName: svg。有两个属性从父级传递到此组件，width 和 height。 d3 组件中的这两个属性上有观察者来更新可视化，使其响应窗口大小的变化。

问题出现在父组件中。我目前绑定到window resize 事件，运行Ember.run 和一个在组件中设置windowSize 属性的回调。我有两个取决于windowSize 的计算属性，宽度和高度是根据DOM 的宽度和高度计算的（由于引导程序中的列，它们是动态的）。因此，计算的属性如下所示：

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

但是，当将计算属性作为 {{d3-component width=halfWidth}} 传递给 d3 组件时，没有默认值。此计算属性仅在触发窗口上的调整大小事件时计算。如果我调整窗口大小，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 节点的宽度？

【问题讨论】：

标签： ember.js d3.js

【解决方案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 队列来安排更改。

【讨论】：