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

我有一个“变量赋值”组件，如下所示（蓝钻与黄色球体附后）：如何在DOM中更改其父项时“保留”实体？

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>

作为一种解决/劈我在想使用某种标志来查看初始化是否已经在元素/实体之前被调用，该组件是属性，然后不运行初始化代码，类似于

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

但这似乎是一个不好的方法来做到这一点，也看着A框架的来源似乎appendChild导致所有组件被删除，然后再次添加，所以它实际上并不工作，或至少导致其他事情打破。

有没有一种很好的方法来做到这一点，或者是否有一种不同的方式来定义变量赋值组件，以便黄色球体管理单元组件不是初始化中的子集？

来源

2017-06-03 Irvin

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

删除元素后，请拨打el = el.cloneNode()进行干净的复制并追加该元素。
不要让球体成为您的variable-assignment组件的子项，而只需让“父”组件在tick()函数中更新子项的位置/旋转。
使用底层的three.js API传递THREE.Object3D，而不实际更改任何元素的父项。

（3）的一个例子：

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

来源

2017-06-06 04:27:48

感谢@Don！我现在不在城里，但是当我回到家时，会尝试其中的一些，并用最适合我的方式更新问题。 – Irvin

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

回答

相关问题