Aframe 在组件之间发出自定义事件答案

【问题标题】：Aframe Emitting Custom Events Between ComponentsAframe 在组件之间发出自定义事件
【发布时间】：2017-02-01 06:21:40
【问题描述】：

我正在尝试在框架中创建一个自定义事件dataReady，该事件将在成功下载几个不同的数据源时发出。我希望多个其他组件侦听此事件，然后使它们的元素父级可见或执行其他操作。

在下面的示例代码中，eventListener 在事件发出之前被添加（使用console.log() 进行测试），但在事件发出时没有调用元素上的侦听器函数。我觉得所有部件都已到位，但它只是无法正常工作。任何想法将不胜感激？

组件 1 附加到 <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));
    }
});

组件 2 附加到 <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 内容：

<!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>

【问题讨论】：

标签： javascript aframe

【解决方案1】：

您可以依靠事件冒泡并监听场景，并将实体存储在事件详细信息中，以便您知道它来自哪里：

// 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 () { // ... });

或者您可以将带有选择器属性类型的引用传递给要监听的实体：

// 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>

【讨论】：

感谢@ngokevin！我通过提供false 作为emit 函数中的第三个选项来禁用冒泡，然后不知道sceneEl。现在效果很好。再次感谢您的快速响应！
使用 emit 函数绝对是正确的方法，但是，我建议在事件中使用标准的 target 和 currentTarget 属性，而不是在细节中传递 el。我创建了一个小提琴来展示它是如何工作的：jsfiddle.net/beyerz/1wrftbc6