0.0.28 • Published 7 years ago
choo-view-app v0.0.28
choo-view-app
Create choo single-view app (widget). Create choo apps with child apps.
Single view-app
const html = require('choo/html');
const chooViewApp = require('choo-view-app');
const view = (state, prev, send) => html`
<div>
${state.title}
<input oninput=${(e)=>send('change', e.target.value)} />
</div>
`;
const app = chooViewApp.createApp(view);
app.model({
state:{
title:'view app'
},
reducers:{
change(state, data){
return { title:data }
}
}
});
chooViewApp.mount(app.start(), '#chooApp');
After start the app you can use app.send
to call actions.
View-apps group
const html = require('choo/html')
const chooViewApp = require('choo-view-app');
const view = (state, prev, send) => html`
<div>
<h1>${state.title}</h1>
<input oninput=${(e)=>send('change', e.target.value)} />
</div>
`
const group = chooViewApp.group({
appOne:view,
appTwo:view
});
group.model({
state:{
title:'group'
},
reducers:{
change(state, data){
return { title:data }
}
}
});
group.start();
chooViewApp.mount(group.children.appOne.start(),'#appOne');
chooViewApp.mount(group.children.appTwo.start(),'#appTwo');
View-app with children
const html = require('choo/html')
const chooViewApp = require('choo-view-app');
const view = (state, prev, send) => html`
<div>
<h1>${state.title}</h1>
<input oninput=${(e)=>send('change', e.target.value)} />
</div>
`
const altView = (state, prev, send) => html`
<div>
<h1>${state.title}</h1>
<h2>${state.sub}</h2>
<input oninput=${(e)=>send('changeSub', e.target.value)} />
</div>
`
const parentApp = chooViewApp.createApp(view, {
subAppOne:view,
subAppTwo:altView
});
parentApp.model({
state:{
title:Math.random(),
sub:Math.random()
},
reducers:{
change(state,data){
return { title:data }
},
changeSub(state,data){
return { sub:data }
}
}
});
chooViewApp.mount(parentApp.start(),'#parentApp');
// must start parent app in order to have chldren available.
chooViewApp.mount(parentApp.children.subAppOne.start(),'#childOneApp');
chooViewApp.mount(parentApp.children.subAppTwo.start(),'#childTwoApp');
0.0.28
7 years ago
0.0.27
7 years ago
0.0.26
7 years ago
0.0.25
7 years ago
0.0.24
7 years ago
0.0.23
7 years ago
0.0.22
7 years ago
0.0.20
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.15
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago