为什么Aframe的依赖属性不起作用?

时间:2018-01-17 01:55:22

标签: javascript aframe virtual-reality

我有以下使用组件初始化实体的简单示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <script>
    AFRAME.registerComponent('a', {
      dependencies: ['b']
    });
    // Initializes second.
    AFRAME.registerComponent('b', {
      dependencies: ['c']
    });
    // Initializes first.
    AFRAME.registerComponent('c', {});
  </script>
  <body>
    <a-scene>
    </a-scene>
  </body>
  <script>
    sceneEl = document.querySelector('a-scene');
    aEntity = document.createElement('a-entity');
    aEntity.setAttribute('a');
    sceneEl.appendChild(aEntity);
  </script>
</html>

这来自Aframe关于组件和依赖关系的文档

  

依赖关系:如果组件依赖于一个或多个其他组件,则允许控制组件初始化的排序。在初始化当前组件之前,依赖项数组中指定的组件名称将从左向右初始化。如果依赖项具有其他依赖项组件,则将以相同方式对这些其他依赖项组件进行排序。

我的问题是为什么这段代码不起作用。该代码按预期生成a-entity但未附加任何组件。我希望看到a,b和c附加到我的实体。我做错了什么?

1 个答案:

答案 0 :(得分:1)

看起来如果您没有为setAttribute提供值,则忽略它。

请尝试aEntity.setAttribute('a', '');

控制台应显示:<a-entity c="" b="" a="" position="" rotation="" scale="" visible=""></a-entity>

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <script>
    AFRAME.registerComponent('a', {
      dependencies: ['b']
    });
    // Initializes second.
    AFRAME.registerComponent('b', {
      dependencies: ['c']
    });
    // Initializes first.
    AFRAME.registerComponent('c', {});
  </script>
  <body>
    <a-scene>
    </a-scene>
  </body>
  <script>
    sceneEl = document.querySelector('a-scene');
    aEntity = document.createElement('a-entity');
    aEntity.setAttribute('a', '');
    sceneEl.appendChild(aEntity);
    console.log(aEntity)
  </script>
</html>