框架状态组件-将数据从状态传递到组件

时间:2018-12-09 15:04:57

标签: three.js aframe

我正在使用框架状态组件来构建游戏,并通过状态变量来跟踪游戏级别和播放/暂停状态。

我希望了解如何将状态数据传递给具有属性的组件。

这是我的状态-

AFRAME.registerState({
  initialState: {
    score: 0
  },
 handlers: {
    gamePaused: function(state) {
      state.gamePaused = true;
    },
    gameStarted: function(state, event) {
     state.gamePaused = false;            
     state.level = event.source;     
    }
  }
});

然后我通过在角度控制器中发出一个事件将关卡传递给gameStarted处理程序-

el.emit('gameStarted', {source: levelnumber}, true);

这是我的html

<a-entity bind__model-subset="target: #orca; gamelevel: level"></a-entity>

组件“模型子集”最初仅接受“目标”属性。我在其中包含了游戏级别属性,以便可以将状态变量级别传递给此组件。此后,我进行了修改,将模型子集组件添加到架构中的gamelevel属性,如下所示-

AFRAME.registerComponent('model-subset', {
  schema: {
    target: { default: '', type: 'selector' },
    gamelevel: { type: 'number'}
  },
  init: function() {
    var data = this.data;
    var el = this.el;
    console.log("model-subset level is ", data.gamelevel); //this component does not get executed
  }
})

但是,它出错了,并且组件代码没有执行。您能否举个例子,说明如何将状态数据传递到在其架构中已经具有一些属性的不同组件?

1 个答案:

答案 0 :(得分:1)

好问题。

bind__组件中,您仅传递状态属性,而不传递任何实数值。实数值包含在组件定义本身中。因此,将target: #orca移到model-subset中,因为这只是一个值。

<a-entity bind__model-subset="gamelevel: level" model-subset="target: #orca"></a-entity>