Question

我无法正确返回数据。首次加载此页面时，它将为oldData记录一个空白{}，而“ this”返回元素本身。单击时，它将记录oldData的mouseEvent和“ this”的窗口元素。

我希望它应该一致地记录来自架构的数据。我不确定更新首次触发时该对象是否应该为空，但这取决于此时的“ oldData”是什么。我也希望“ this”始终是对组件函数的引用，而不是对窗口的引用。我在这里不考虑什么？

<html lang="en">
<head>
  <script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
  <script>
    AFRAME.registerComponent('my-component', {
      multiple: false,
      schema: {
        mood: {
          type: 'string',
          default: 'happy'
        }
      },

      init() {
        window.addEventListener('click', this.update)
      },

      update(oldData) {
        console.log("oldData: ", oldData);
        console.log("this: ", this);
      },
    })
  </script>
</head>
<body>
  <a-scene>
    <a-sky color="blue"></a-sky>
    <a-box id="bluebox" color="green" position="-1 0 -3" my-component></a-box>
    <a-light position="-3 4 2" type="spot" target="#bluebox"></a-light>
  </a-scene>
</body>
</html>

Answer 1

两个问题：

方法未绑定到组件，除非您将其称为componentObj.methodName()。您可以使用bind明确绑定它们：

this.methodName = this.methodName.bind(this);
如果通过事件侦听器调用update方法，则不会传递oldData参数。最好创建自己的方法onClick。您可以在方法逻辑中依靠this.data而不是oldData。

window.addEventListener('click', this.onClick.bind(this));

AFRAME.registerComponent('foo', { schema: {}, init: function () { window.addEventListener('click', this.onClick.bind(this)); }, update: function () {}, onClick: function () { ... this.data ... } });

Answer 2

您将this.update作为回调传递，并且“ this”将在侦听器方法的上下文中。尝试：

init () {
  this.update = this.update.bind(this)
  window.addEventListener('click', this.update)
},

Answer 3

好的，这可以正常工作。单击（使用绑定方法）后，内部组件上的color属性将更改，这将触发更新方法，该方法将显示oldData和新数据。还会根据this.data中的内部颜色更改外部颜色组件的属性。

<script>

  AFRAME.registerComponent('my-component', {

    multiple: false,

    schema: {
      color: {default: '#' + Math.random().toString(16).slice(2, 8).toUpperCase()}          
    },

    init: function () {
      this.changeAtt = this.changeAtt.bind(this)
      window.addEventListener('click', this.changeAtt);
      this.el.setAttribute('color', this.data.color)
    },

    update: function (oldData){
      console.log("oldData: ", oldData);
      console.log("current Data: ", this.data);
    },

    changeAtt () {
      el = this.el;
      el.setAttribute('my-component', {color: '#' + Math.random().toString(16).slice(2, 8).toUpperCase()})
      el.setAttribute('color', this.data.color)
    }

  })

</script>

为什么更新功能和“ this”未提供组件的预期数据

3 个答案: