ViewMaster
A tiny library for managing client-side views
How it works
ViewMaster takes a single DOM element, (the context), and transitions pieces of markup (views) in and out of that context. ViewMaster uses user-defined functions (called transitions) to manage the moving of views in and out. It also comes with a few ready-made transitions.
Usage
ViewMaster exposes a global object, View
. ViewMaster needs a context to operate on, so let's give it one. You can pass any valid jQuery selector to View.context()
.
View.context('#main');
Next we'll need some views. The most effective way to store the views in the DOM is in a <script>
tag, since these are not parsed by the browser.
<script id="hello">
<h1>Hello, world!</h1>
</script>
Now that we have a view, let's tell ViewMaster about it. We do this with a call to View.view()
, which takes the view name and a jQuery selector. ViewMaster will query that selector, and take the HTML contents of the first matching element.
View.view('hello', '#hello');
Finally, it's time to go to a view! We use View.go()
to navigate the context to a view, passing in the view name (which we defined earlier), and optionally a transition name. ViewMaster ships with a transition called slideLeft
, so we'll use that.
View.go('hello', 'slideLeft');
Note that we didn't actually have to pass in slideLeft
, since it's the default transition. That line could have been written simply as:
View.go('hello');
That's it! Go build something cool.