在DOM中更改父实体时，如何“保留”实体？

Question

我有一个“变量赋值”组件，如下所示(蓝色菱形，附加黄色球体)：

http://i.imgur.com/nJotPgW.gif (不幸的是，我没有足够的名气来内联图像)

在这里，可以捕捉到的黄色球体是在变量赋值组件的初始化过程中创建的，如下所示

AFRAME.registerComponent('variable-assignment', {
  schema: {
    grabbable: {default: true}
  },
  init: function () {
    this.el.innerHTML = `
    <a-sphere
    snap-site="controller:#right-hand"
    radius=".1"
    color="yellow"
    material="transparent:true; opacity:.5;"
    position=".22 0 0">
    </a-sphere>
    `;
    this.label = 'x';
    this.el.setAttribute('geometry', {
      primitive: 'octahedron',
      radius: .1,
      color: 'blue'
    });
    ...

snap-site组件具有检测与红色球体发生冲突的代码，然后使其成为子元素。所以在碰撞之前，DOM看起来像这样。

<a-sphere color=red></a-sphere>
<a-entity variable-assignment>
    <a-sphere snap-site>
    <a-sphere>
</a-entity>

在此之后

<a-entity variable-assignment>
    <a-sphere snap-site>
        <a-sphere color=red></a-sphere>
    <a-sphere>
</a-entity>

问题是，当我想要使用appendChild将具有变量赋值的实体移动到另一个DOM元素中时，再次调用变量赋值的初始化函数时，innerHTML被重置。例如，如果我们有

<a-entity container></a-entity>
<a-entity variable-assignment>
    <a-sphere snap-site>
        <a-sphere color=red></a-sphere>
    <a-sphere>
</a-entity>

我们想把变量赋值移动到容器中，使用类似containerElement.appendChild(variableAssignmentEntity)的东西，内部的红色球体被移除

<a-entity container>
    <a-entity variable-assignment>
        <a-sphere snap-site>
        <a-sphere>
    </a-entity>
</a-entity>

作为一种解决办法/hack，我正在考虑使用某种标志来查看以前是否已经为该组件所属的元素/实体调用了initialize，然后不运行初始化代码，例如

  init: function () {
    if (this.el.getAttribute('initialized')) {
        return;
    } 
    this.el.setAttribute('initialized', true);
    ...

但这似乎是一种糟糕的方式，而且查看A-Frame源代码，似乎appendChild会导致所有组件被删除，然后再次添加，所以它实际上也不起作用，或者至少会导致其他东西崩溃。

有没有好的方法来做这件事，或者有没有不同的方法来定义变量赋值组件，这样黄色的球体snap-site组件就不会是初始化中的子集了？

Answer 1

您说得对，appendChild会导致组件重新初始化，并且可能无法按预期工作。这里有几个替代方案：

1. 移除元素后，调用el = el.cloneNode()来创建一个干净的副本，并将其追加。
2. 实际上并不使球体成为variable-assignment组件的子级，而只是让' parent‘组件在tick()函数中更新子组件的位置/旋转。
3. 使用底层three.js API传递THREE.Object3D，而不实际更改任何元素的父级。

(3)的一个例子：

var mesh = el.getObject3D('mesh)';
el.removeObject3D('mesh');
otherEl.setObject3D('mesh', mesh);