dom tree traversal with directives

A simple implementation of a declarative approach to data-binding somewhat in the style of Angular.js

by Richard Hunter

HTML

<div>
     <h1 ro-text="title"></h1>
    <div>
         <h1 ro-text="name">kfjdkf</h1>
    </div>
    <div ro-with="details">
        <p ro-text="city"></p>
    </div>
    <p ro-text="personalStatement">jfkd</p>
</div>

JavaScript

function traverseDOM(node, strategy, scope) {
    function fn(node, scope) {
        scope = strategy(node, scope);
        var children = node.children;
        for (var i = 0; i < children.length; i++) {
            fn(children[i], scope);
        }
    }
    fn(node, scope);
}

function textDirective(node, scope) {
    var text = node.getAttribute('ro-text');
    node.innerHTML = scope[text];
}

function hasTextDirective(node) {
    return !!node.getAttribute('ro-text');
}

function hasWithDirective(node) {
    return !!node.getAttribute('ro-with');
}

function withDirective(node, scope) {
    var _with = node.getAttribute('ro-with');
    return scope[_with];
}

function parseNode(node, scope) {
    if (hasTextDirective(node)) {
        textDirective(node, scope);
    } else if (hasWithDirective(node)) {
        scope = withDirective(node, scope);
    }
    return scope;
}

var model = {
    title: "Simple Declarative Data bindings example",
    name: "Richard Hunter",
    personalStatement: [
        "I am a software developer",
        "living and working in London",
        " I am interested in MVC frameworks."].join(''),
    details: {
        city: "London"
    }
};

traverseDOM(document.body, parseNode, model);