Aframeコンポーネント間でカスタムイベントを送信する

いくつかの異なるデータソースが正常にダウンロードされたときに出力されるカスタムイベントdataReadyをaフレームに作成しようとしています。他の複数のコンポーネントがこのイベントをリッスンして、要素の親が表示されるようにしたり、他のアクションを実行したりしたいと思います。Aframeコンポーネント間でカスタムイベントを送信する

以下のサンプルコードでは、イベントが発行される前にeventListenerが追加されています（console.log()を使用してテストされています）が、イベントが発生したときにその要素のリスナー関数が呼び出されていません。私はすべての作品が所定の場所にあるように感じますが、正しく動作していません。どんな考えも大いに評価されるだろうか？ <a-camera data-controller></a-camera>

AFRAME.registerComponent('data-controller', { 
    init: function() { 
     var el = this.el; 
    }, 
    update: function() { 
     async.eachSeries(['api-1', 'api-2'], 
      function (item, cb) { 
       console.log(item); 
       cb(); 
      }, 
      function (err) { 
       if (err) { 
        throw new Error('Error retrieving data from server'); 
       } 

       console.log("emitting the event"); 
       this.el.emit("dataReady", {value: 2}, false); 
      }.bind(this)); 
    } 
});

<a-entity geometry="primitive:plane" road></a-entity>

AFRAME.registerComponent('road', { 
    schema: { 
     width: {type: 'number', default: 4}, 
     height: {type: 'number', default: 4} 
    }, 

    init: function() { 
     var data = this.data; 
     var el = this.el; 

     // Update geometry props 
     el.setAttribute('geometry', 'width', data.width); 
     el.setAttribute('geometry', 'height', data.height); 

     console.log('adding an event listener'); 
     el.addEventListener('click', function (event) { 
      console.log("we are ready to blast off b/c of event listened w/ detail value: " + event.detail.value); 
     }); 
    } 
});

index.htmlの内容に取り付けたコンポーネント2に取り付けられ

コンポーネント1：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 

    <!--Vendor Scripts--> 
    <script src="./js/vendor/aframe.min.js"></script> 
    <script src="./js/vendor/async.min.js"></script> 

    <!--AFRAME Components--> 
    <script src="./js/components/road.js"></script> 
    <script src="./js/data-controller.js"></script> 
</head> 

<body> 
<a-scene> 
    <a-entity geometry="primitive:plane" road></a-entity> 
    <a-camera data-controller></a-camera> 
</a-scene> 
</body> 
</html>

出典

2017-01-31 hotshotiguana

あなたはをバブリングイベントに依存している可能性があり、聞く現場に、それがどこから来たあなたが知っているように、イベントの詳細にエンティティを格納します。

// data-controller component this.el.emit('dataready', {value: 2, el: this.el}) // Event will bubble to the scene. // road component this.el.sceneEl.addEventListener('dataready', function() { // ... });

それとも、どのエンティティを聞きたいとしselectorプロパティタイプとの参照を渡すことができます。
を
// road component schema: { dataEl: {type: 'selector'}, width: {type: 'number', default: 4}, height: {type: 'number', default: 4} }, init: function() { // ... this.data.dataEl.addEventListener('dataready', function() { // ... }); } // <a-entity road="dataEl: [data-controller]"></a-entity>

出典

2017-01-31 22:01:01 ngokevin

ありがとう@ngokevin！私は、 'emit'関数の第3のオプションとして' false'を指定してバブリングを無効にし、 'sceneEl'について知らなかったのです。今は素晴らしい作品です。速い応答のためにもう一度ありがとう！ – hotshotiguana

Aframeコンポーネント間でカスタムイベントを送信する

答えて

関連する問題