Почему функция обновления и «это» не предоставляют ожидаемые данные для компонента - PullRequest
Новая
       7

Почему функция обновления и «это» не предоставляют ожидаемые данные для компонента

0 голосов
/ 06 июля 2018

У меня проблемы с возвратом данных. Когда вы впервые загружаете эту страницу, она записывает пустое {} для oldData, и «this» возвращает сам элемент. Когда вы нажимаете, он регистрирует mouseEvent для oldData и элемент окна для «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>

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Вы передаете this.update в качестве обратного вызова, и 'this' будет находиться в контексте метода слушателя. попробовать: 

init () {
  this.update = this.update.bind(this)
  window.addEventListener('click', this.update)
},
0 голосов
/ 06 июля 2018

Хорошо, это работает правильно. При щелчке (используя метод связывания) атрибут цвета изменяется на внутреннем компоненте, который запускает метод обновления, который отображает 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>
0 голосов
/ 06 июля 2018

Две проблемы:

  1. Методы не привязаны к компоненту, если вы не называете их как componentObj.methodName(). Вы можете связать их явно с bind:

    this.methodName = this.methodName.bind(this);

  2. Если метод обновления вызывается через прослушиватель событий, параметр 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 ... } });

...