Данная библиотека является идеей, и носит демонстрационный характер.

class Tmp

import { Tmp } from "bakugan";
Класс для работы с изменяемым шаблоном или классом. Унаследован от класса Component
Создание
new Tmp(name: { name: string }, props: IHashMapAny);
new Tmp(name: string, props: IHashMapAny);
new Tmp(props: IHashMapAny);
Создает экземпляр класса Tmp
подробней
Параметры:
  • name: string | { name: string } - задает имя компоненту. Если имя не указано, то оно будет присвоено автоматически
  • props: IHashMapAny - параметры. Можно передавать любые параметры, но данный класс имеет следующие зарезервированные параметры (плюс параметры класса Component, т.к. он является его наследником):
    1. ctor: BaseComponent - использовать конструктор класса
import { Component, Tmp, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <tmp ref="myTmp">
                <div>
                    <span style="margin-right: 10px;">1.</span>
                    <span>Hello</span>
                    <span>
                        <txt ref="text"></txt>
                    </span>
                </div>
            </tmp>
        </div>
    `,
})
class App extends Component {

    public afterInit(component: App): void {
        this.get("myTmp").html({ text: ` World` });
    }
}

const app: App = new App();
app.bindTo(document.body);

const newTmp: Tmp = new Tmp({ name: "newFor" }, {
    context: app,
    template: app.get("myTmp").tmp(),
});

app.get("myTmp").insertAfter(newTmp);

setTimeout(() => {
    newTmp.html({ text: ` Ivan` });
}, 2000);
смотреть пример: web | github
Методы
ctor(ctor: ICtorBaseComponent, props: IHashMapAny = {}): void
Меняет конструктор класса
подробней
Параметры:
  • ctor: ICtorBaseComponent - класс, который будет использован
  • props: IHashMapAny = {} - параметры для класса
import { Component, Tmp, Template, template } from "bakugan";

// component ItemOne

@template({
    html: `
        <div>
            <div>component ItemOne</div>
            <div>
                <txt ref="myTxt" html="props.text"></txt>
            </div>
        </div>
    `,
})
class ItemOne extends Component {
    public beforeInit(): void {
        console.log(this.props);
    }
}

// component ItemTwo

@template({
    html: `
        <div>
            <span style="font-weight: bold;">
                <txt ref="myTxt" html="props.text"></txt>
            </span>
        </div>
    `,
})
class ItemTwo extends Component { }

// template

const tmp: Template = Template.make({
    html: `
        <span style="cursor: pointer; margin-left: 10px;">
            Goodbye
            <txt ref="myTxt" html="props.text"></txt>
        </span>
    `,
});

// component app

@template({
    html: `
        <div>
            <div style="margin-bottom: 20px;">
                <input type="button" value="set ItemOne" onClick="setItemOne" />
                <input type="button" value="set ItemTwo" onClick="setItemTwo" />
                <input type="button" value="set Template" onClick="setTemplate" />
                <input type="button" value="reset" onClick="reset" />
            </div>
            <tmp ref="myTmp" text="data">
                <div>
                    <span>Hello</span>
                    <txt ref="myTxt" html="props.text"></txt>
                </div>
            </tmp>
        </div>
    `,
})
class App extends Component {

    public data: string;
    public base: any;

    public beforeInit(): void {
        this.data = ` Petya`;
    }

    public afterInit(): void {
        this.base = this.get("myTmp").tmp();
    }

    public setItemOne(): void {
        const myTmp: Tmp = this.get("myTmp");

        myTmp.ctor(ItemOne, { text: this.data });
    }

    public setItemTwo(): void {
        const myTmp: Tmp = this.get("myTmp");

        myTmp.ctor(ItemTwo, { text: this.data });
    }

    public setTemplate(): void {
        const myTmp: Tmp = this.get("myTmp");

        myTmp.tmp(tmp);
    }

    public reset(): void {
        const myTmp: Tmp = this.get("myTmp");

        myTmp.tmp(this.base);
    }
}

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github