如何在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中更改其父項時「保留」實體？

回答

相關問題