在Ember Octane中添加DOM元素

Question

我目前正在将一些代码从旧的Ember样式转换到Ember Octane，所以我对Octane有点新手。在问题的核心，我想在插入元素时使用this.element.appendChild附加一个div，然后选择并附加一个SVG到div并从那里修改它。然而，Ember Octane不允许生命周期挂钩。做这件事最好的方法是什么？

更详细地说，该组件利用D3来呈现图形，因此它通过创建一个id为svg的div来初始化图的设置，然后选择它并向其附加一个svg，并继续对其执行D3操作以呈现图形。

我已经研究了ember-render-modifiers，但这似乎是一种变通方法，是重构代码的一种方法，所以我想知道是否有比这更好的方法。

Answer 1

尽管如此，在Octane中使用ember-render-modifiers是可行的，因为它将提供对元素的访问，并且它将在插入时起作用。

看看他们的例子。

{{#if this.shouldShow}}
  <div {{did-insert this.fadeIn}} class="alert">
    {{yield}}
  </div>
{{/if}}

export default Component.extend({
  fadeIn(element) {
    element.classList.add('fade-in');
  }
});

Answer 2

ember-render-modifiers旨在简化向辛烷值的过渡。

您希望使用ember-modifier创建自己的修饰符

/* component.hbs */
<div {{d3-chart this.data this.options}}></div> 

/* app/modifiers/d3-chart.js */
import { modifier } from 'ember-modifier';

export default modifier(element, [data, options] => {
  /*
    The `element` argument is the element the modifier was invoked on
    The second argument is an array of positional params 

    I'm guessing at the params you'd need; not sure what would be an optimal design since that would depend on what you are doing with d3.

    Append the svg, setup d3, etc in here.
  */

  return () =>  {
    /* Cleanup d3 stuff here for when the element with the modifier is torn down */
  };
});

修饰符也有面向对象的样式。