Skip to content

Instantly share code, notes, and snippets.

@stagfoo
Last active December 29, 2017 00:38
Show Gist options
  • Save stagfoo/44098753887952e559838407cfbd018c to your computer and use it in GitHub Desktop.
Save stagfoo/44098753887952e559838407cfbd018c to your computer and use it in GitHub Desktop.
Call a class inside another class constructor
const yo = require('yo-yo');
import Title from '../Title/Title';
import Soshi from '../core'
class Card extends Soshi {
el: HTMLElement;
props: {
title: string,
image: string,
text: string
}
title: {
node: HTMLElement,
class: any //look at interfaces again
}
constructor(props){
super(props);
const TitleNode = new Title({text: props.title});
this.title = {
class: TitleNode,
node: TitleNode.node
}
}
template(): HTMLElement {
//TODO Fix
console.log('this title', this.title);
//const title = new Title({text: this.props.title});
return yo`<div class="card">
<img width="100%" src=${this.props.image} />
${this.title.node}
<p>
${this.props.text}
</p>
</div>`;
}
}
export default Card;
const yo = require('yo-yo');
class Soshi {
node: HTMLElement
props: Object
constructor(
props
) {
this.node = null;
this.props = props;
this.update = this.update.bind(this);
this.render = this.render.bind(this);
this.render();
}
template(): HTMLElement {
return null;
}
update(props): Boolean {
const prevEl = this.node.innerHTML;
this.props = props;
const newView = this.template();
yo.update(this.node, newView);
return prevEl !== this.node.innerHTML;
}
render(): HTMLElement {
this.node = this.template();
return this.node;
}
}
export default Soshi;
const yo = require('yo-yo');
import Soshi from '../core'
class Title extends Soshi {
el: HTMLElement
props: {
text: string,
}
template(): HTMLElement {
return yo`<h1>${this.props.text}</h1>`;
}
}
export default Title;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment