Как инкапсулировать состояние с помощью метода обновления и мифрилового компонента - PullRequest
Новая
       29

Как инкапсулировать состояние с помощью метода обновления и мифрилового компонента

0 голосов
/ 06 октября 2019

Я хочу отображать состояние, которое обновляется при каждом кадре анимации запроса.

Я хочу инкапсулировать состояние с помощью метода обновления и соответствующего компонента:

Но это не удается, потому что это неправильное использованиеМифриловые компоненты. 

import * as Vnode from 'mithril/render/vnode';
import * as h from 'mithril/hyperscript';

export default function Play() {
    // background is another encapsulation like Play
  let background = new Background(this);

  let data;

  this.init = d => {
    data = d;
    background.init();
  };

  this.update = delta => {
    background.update(delta);
  };

  this.component = ({
    view() {
    return h('div.' + data,
             [Vnode(background.component)]
              );
    });

}

Код рендеринга: 

import mrender from 'mithril/render';
import * as Vnode from 'mithril/render/vnode';


export default function MRender(mountPoint) {

  this.render = (component) => {
    mrender(mountPoint, Vnode(component));
  };

}

Использование: 

let mrender = new MRender(element);

let play = new Play();

function step() {
  play.update();
  mrender.render(Vnode(play.component));
  requestAnimationFrame(step);
};

step();

Я хочу, чтобы изменения состояния и рендеринг кода находились в одном месте, потому чтосостояние связано с анимацией просмотра.

1 Ответ

0 голосов
/ 18 октября 2019

Если я правильно понимаю, вы хотите иметь возможность управлять внутренним состоянием компонента во время его обновления requestAnimationFrame? Следующее может привести вас на правильный путь: 

const m = require('mithril');

//Use a closure to manage internal state of component
const play = initialVnode => {

  const { 
    timestamp
  } = initialVnode.attrs;

  const start = timestamp;

  return {

    view: vnode => m('ul',[
        m('li',`Start: ${start}`),
        m('li',`Current timestamp: ${vnode.attrs.timestamp}`),      
    ])
  }
};

let reqID;

const step = timestamp => {

  if( timestamp ){ //Start animating when timestamp is defined 

      m.render(document.body, m(play,{
        timestamp,
      }));
  }

  reqID = requestAnimationFrame(step);

  if( reqID === 60 ){ //Add condition to stop animating
     cancelAnimationFrame(reqID);
  }

};

step();

Надеюсь, это поможет.

...