choo-view-app
Create choo single-view app (widget). Create choo apps with child apps.
Last updated 3 years ago by qzapaia .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install choo-view-app 
SYNC missed versions from official npm registry.

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');

Current Tags

  • 0.0.28                                ...           latest (3 years ago)

26 Versions

  • 0.0.28                                ...           3 years ago
  • 0.0.27                                ...           3 years ago
  • 0.0.26                                ...           3 years ago
  • 0.0.25                                ...           3 years ago
  • 0.0.24                                ...           3 years ago
  • 0.0.23                                ...           3 years ago
  • 0.0.22                                ...           3 years ago
  • 0.0.20                                ...           3 years ago
  • 0.0.18                                ...           3 years ago
  • 0.0.17                                ...           3 years ago
  • 0.0.16                                ...           3 years ago
  • 0.0.15                                ...           3 years ago
  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.12                                ...           3 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 26
Dependencies (0)
None
Dev Dependencies (4)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |