How to encapsulate state with an update method and a mithril component

E

eguneys

Guest
I want to render state that is updated every request animation frame.

I want to encapsulate state with an update method and corresponding component:

But that fails because it's not correct usage of mithril components.

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)]
);
});

}


Render code:

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


export default function MRender(mountPoint) {

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

}


Usage:

let mrender = new MRender(element);

let play = new Play();

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

step();

Continue reading...
 
Top