首页 文章

如何在框架中设置一个组件，该组件聚合来自连接到同一实体的其他组件的数据？

提问于
浏览 次
1

Scenario

我正在尝试创建一个2组件'system'，其中有一个主组件， aggregator 组件和多个子 source 组件，用于将数据提供给聚合器 . 收到所有数据后，聚合器组件将在父实体上运行某些功能 . 我正在使用a-frame 0.8.2 .

Minimal example

为了以最简单的形式演示逻辑，下面是一个示例，其中3个子组件附加到实体，并且每个子组件都将字符串传递给父组件，方法是将它们推送到作为聚合器组件模式一部分的数组中 .

这是主要组件 aggregator

AFRAME.registerComponent('aggregator', {

        schema: {
            testarray: {type: 'array', default: []},
        },

        update: function(){
            //to demonstrate problem
            console.log(this.data.testarray)
        },

})

子组件 source

AFRAME.registerComponent('source', {

        dependencies: ['aggregator'],

        multiple: true,

        schema: {
            teststring: {type: 'string', default: ''},
        },

        init: function(){          
            var string = this.data.teststring
            var aggArray = this.el.getAttribute('aggregator').testarray
            aggArray.push(string)
            this.el.setAttribute('aggregator', 'testarray', aggArray)          
        },

})

这是测试它的HTML

<a-scene>
      <a-entity
        id="aggregatortest"
        source__one="teststring:testone"
        source__two="teststring:testtwo"
        source__three="teststring:testthree">
      </a-entity>
</a-scene>

Here is a glitch（显然不是很明显但是如果你打开控制台，你会看到一个'empty'数组（实际上并不是空的，但是看起来如此） .

The problem

正如您将看到的那样，如果您运行或查看上面的示例，聚合器组件的 testarray 在更新时是'empty' . 我知道数据实际上是成功传递的，就像我在控制台中查看组件一样，我可以看到数组已经使用组件 data 中的值进行了更新，但是它没有更新 . 这是一个问题，因为如果我尝试在聚合器的更新中运行某些功能（取决于传递的数据），它就不起作用 .

难道我做错了什么？我需要等待加载吗？还是一些内部事件？我希望每次初始化 source 组件（在这种情况下为3次）时，它会强制更新 aggregator 组件，显然它是以某种方式，但不是我可以使用的方式，因为我无法访问更新函数中更新的模式属性 .

任何建议将不胜感激，如果有任何更多的信息或真实的背景将有所帮助，请让我知道 .

aframe

1 回答

  • 1

    tldr ：而不是抓取对 testarray 克隆的引用：

    var aggArray = this.el.getAttribute('aggregator').testarray.slice(0)

    就像我做的那样here . 克隆@slice（0）由David Walsh here推荐 .

    有了这个简单的陈述

    var aggArray = this.el.getAttribute('aggregator').testarray

    你 grab 了对 testarray 的引用 .

    因此，对 aggArray 的任何更改都将应用于 aggregator.testarray . 在fiddle中查看 . 我删除了 setAttribute 位，数组仍然有新元素 .

    现在，请记住，如果两个数组都相同，则更新甚至不会触发 - 为什么旧数据和新数据都完全相同 .

    总之，您必须提供数组的复制/克隆 - >以便更新功能可以正常工作 .

    回复于

相关问题