bomobile

a small mvc framework for authoring mobile apps with native-like performance. full unit test coverage.

bo

a small (1.6k gzipped) mvv framework for authoring mobile apps with native-like performance. full unit test coverage.

http://eighttrackmind.github.io/bo/demo/

  • barebones mvv (fully tested)
  • smooth paging and sliding animation
  • <div bo-pane="foo">...</div> - set a pane's ID to foo (works with any tag, not just div)
  • <a bo-trigger="foo">...</div> - slide to the pane with ID foo when clicked/tapped (works with any tag, not just a)

see https://github.com/eighttrackmind/bo/tree/master/coffee

Put your pages into a single HTML file. Each pane ("screen") should have a unique data-bo-pane attribute. To trigger another pane when clicked/tapped, give the trigger a data-bo-trigger-pane attribute.

<div bo-pane="paneId">
    <button bo-trigger="anotherPaneId">Next</button>
</div>

Link to bo.css in your <head>:

...
<head>
    <link rel="stylesheet" href="bo.css" />
...

Then install dependencies:

npm install

Finally, link to dependencies followed by bo.js at the bottom of your <body>:

    ...
    <script src="node_modules/izzy/izzy.js"></script> 
    <script src="node_modules/umodel/umodel.js"></script> 
    <script src="bo.js"></script> 
</body>
# create a new Bo instance 
bo = new Bo
MethodArgumentsDescriptionExample
on"event1...", handlerAttach a DOM event listenerbo.on "mousedown touchstart", (event) -> ...
registerDOMElementRegister a DOM Element as a Bo panebo.register document.querySelector "#id"
hideAll-Hide all Bo panesdo bo.hideAll
show"id"Show pane with the given IDbo.show "myPaneId"
# create a new Bo instance, passing in a custom options dictionary 
new Bo options
OptionTypeDefaultDescription
animationDurationNumber200Animation duration (ms), be sure to update in bo.styl as well
paneAttributeString"bo-pane"Attribute indicating that an element is a Bo pane
changeFunction(PaneInstance) ->Callback fired when a Bo pane is shown
npm install
grunt