Recommended method of building portable contained reactive components? #83
Description
Many frameworks have methods of building portable components before the webcomponent spec, what is the recommended way to do this with Mikado?
What I came up with is something like this (though it feels like I am hacking around the foreach and I'd have to do an app.render(data) on every change, is there a better way?):
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mikado</title>
<script type="module" src="js/main.js" async></script>
</head>
<body><!----></body>
</html>main.js
import Mikado, {register} from "../node_modules/mikado/dist/module-debug/mikado.js";
import {route} from "../node_modules/mikado/dist/module-debug/event.js";
import tpl_app from "../compiled/app.js";
import tpl_form from "../compiled/form.js";
import tpl_textbox from "../compiled/textbox.js";
register(tpl_form)
register(tpl_textbox)
const app = new Mikado(tpl_app, {
mount: document.body,
recycle: true,
cache: true
});
const state = {
form: { id:"form", items:{ username: 'cookie' } },
setState: function (s,k,v) {
s[k] = v
}
}
const data = {}
route("testrun", function(target, event){
console.log("DATA",data,state)
const id = target.dataset.id
const fn = target.dataset.fn
console.log(id,fn,target)
state[id][fn](state[id]);
});
app.render(data,state);
template/app.html
<main>
<header>Test Form</header>
<section include="compiled/form" foreach="state.form"></section>
</main>template/form.html
<form>
<script>{{@
state.setState(data,'items', {
username: { type:"text", title:"Username", name:"user", value:((data||{}).items||{}).username },
password: { type:"password", title:"Password", name:"pass", value:'' }
});
state.setState(data,'fn_submit', function(data) {
console.log("got", data)
});
}}</script>
<section include="compiled/textbox" foreach="data.items.username"></section>
<section include="compiled/textbox" foreach="data.items.password"></section>
<div click="testrun" data-id="{{data.id}}" data-fn="fn_submit">button</div>
</form>template/textbox.html
<span>
{{@
state.setState(data,'value', (data||{}).value )
}}
<input type="{{?data.type}}" placeholder="{{?data.title}}" name="{{?data.name}}" value="{{?data.value}}">
</span>