README
Virtual Trackr
Virtual DOM meets Trackr, a reactive view library.
Install
Download a UMD bundle from the releases page. The variable vtrackr
will be attached to window
.
<script type="text/javascript" src="trackr.js"></script>
<script type="text/javascript" src="virtual-trackr.js"></script>
If using Browserify or Node.js, you can install via NPM.
$ npm install trackr virtual-trackr
VTrackr depends on Trackr. Please include it before this library. You will also probably need the Virtual DOM library, but that is not required for VTrackr to run.
Usage
VTrackr will manage a tree of virtual nodes and auto-update the DOM for you. To begin, run the main vtrackr
method with a function that returns virtual nodes.
var h = require("virtual-dom/h");
var myview = vtrackr(function() {
return h("h1", "Hello World");
});
The returned view is a widget that can be used with other virtual nodes or rendered and appended to the document. Below are three different ways to render a VTrackr instance on the screen.
myview.paint("body");
var createElement = require("virtual-dom/create-element");
var node = createElement(myview);
document.body.appendChild(node);
var createElement = require("virtual-dom/create-element");
var tree = h("div", [ myview ]);
var node = createElement(tree);
document.body.appendChild(node);
The VTrackr instance is now live. Any Trackr dependencies that change will invalidate and redraw the view.
var name = "World";
var dep = new Trackr.Dependency();
var myview = vtrackr(function() {
dep.depend();
return h("h1", "Hello " + name);
});
myview.paint("body");
// later
name = "Dave";
dep.changed();
Just like Trackr, VTrackr instances can be nested within other instances. Children instances will automatically clean themselves up if the parent is rerun.
var name = "World";
var dep = new Trackr.Dependency();
var myview = vtrackr(function() {
// only rerenders the text node on changes
var nameview = vtrackr(function() {
dep.depend();
return name;
});
return h("h1", [ "Hello", nameview ]);
});
myview.paint("body");