在 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

尽管如此， ember-render-modifiers是 Octane 中的方法，因为它可以让您访问元素，并且可以用于插入。

看看他们的例子。

{{#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旨在简化向 Octane 的过渡。

您想使用ember-modifier创建自己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 */
  };
});

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