组件依赖性如何在A帧中起作用?

时间:2018-06-21 08:39:48

标签: aframe

我试图了解依赖项在A框架组件中的工作方式,因为它似乎不像我认为的那样起作用。

场景,我正在尝试创建一种“母系”组件来存储全局信息,这些信息可以在体验的不同阶段从不同组件访问。为此,我将一个组件附加到a-scene,然后将“卫星”组件附加到该场景的子实体。

问题是,在加载时似乎没有及时初始化母组件以访问其属性。我以为如果将母舰组件添加为卫星组件的dependency,它将等待它初始化,但是似乎无法正常工作。

请参阅下面的组件;

//the mothership component
 AFRAME.registerComponent('mothership', {  
        schema: {
          testString: {type: 'string', default: 'Working'},
        },
        init: function(){
        },
 }),

//the satellite component
  AFRAME.registerComponent('satellite', {     

        dependencies: ['mothership'],

        init: function(){

          var mother = this.el.sceneEl
          var self = this.el

          var message = mother.getAttribute('mothership').testString
          //to demonstrate problem
          self.setAttribute('value', message)
          console.log(message)
          //-> undefined

        },
 })

和HTML

 <a-scene mothership>
      <a-text 
        satellite
        position="0 1.6 -3"
        color="black"
        align="center"
        value="">
      </a-text>
 </a-scene>

Here is a fiddle这个示例显示了它是如何工作的,testString的值为undefined

我通过在卫星组件中添加eventListener来等待母舰的loaded事件,使这两个组件之间的连接正常工作。参见下面的示例和小提琴。

      //the mothership component
      AFRAME.registerComponent('mothership', {  
        schema: {
          testString: {type: 'string', default: 'Working'},
        },
        init: function(){
        },
      }),

      //the satellite component
      AFRAME.registerComponent('satellite', {     

        dependencies: ['mothership'],

        init: function(){

          var mother = this.el.sceneEl
          var self = this.el

          //wait for mothership to be loaded
          mother.addEventListener('loaded', function(){
            var message = mother.getAttribute('mothership').testString
            //to demonstrate problem
            self.setAttribute('value', message)
            console.log(message)
          })

        },
      })

使用与原始示例相同的HTML。其中Here is a fiddle符合我的预期。

那么dependencies并不意味着等待指定的组件被加载/初始化吗?还是我做错了什么?如有必要,我可以使用eventListener来解决此问题,但我想更好地理解它,以及是否有更好的方法来实现。

任何建议一如既往地令人感激,如果您需要更多信息以了解问题,请告诉我。

1 个答案:

答案 0 :(得分:1)

组件依赖性适用于同一实体上的组件,而不适用于跨实体的组件,例如您的卫星/母舰组件示例。像往常一样使用加载的事件是方法。