cruncher/app.js

A very simple and light-weight toolkit for binding dynamic DOM views with data.

app.js

A simple and light app toolkit. Declaratively binds data to dynamic views as defined by data attributes in HTML.

Launch

var app = new App();

Views

<div data-view="name" data-data="path.to.data">
    <h1>Hello world</h1>
</div>

Where 'name' is the key of a view function in app.views and 'path.to.data' points to an object in app.data. The view is defined as a function that takes the DOM node and the data object as arguments:

app.views['name'] = function(node, data) {
    // Listen for changes to data.
    observe(data, function(data) {
        // Do something to the node.
    });
};

Templates

<div data-template="name">
    <h1>{{ prop }}</h1>
</div>

The template is stored as a DOM node in app.templates[name], and can be cloned and rendered with app.render(name, context), where context is an object with properties that match template tags – such as {{ prop }}.

Data

Data must be defined before it is needed by a view. In the case of views already in the DOM, this means before jQuery(document).ready().

Other than that, there is no restriction about how your data is organised. The data-data attribute accepts a dot delimited path so you can find your data in any arbritrary structure inside of app.data.