PURE.js example

by benjamine

HTML

<script src="https://raw.github.com/pure/pure/master/libs/pure.js"></script>
<html>
    <head>
    </head>
<body>
<div>
     <fieldset id="main">
         <label for="name">Name:</label> <input type="text" class="name" id="name" name="name"><br/>
        <label for="age">Age:</label> <input type="text" class="age" id="age" name="age">
    </fieldset>
    <div>
        <p>Jobs:</p>
    <ul id="jobs">
        <li class="jobs"><span class="title">(TITLE)</span> <span class="place">(PLACE)</span></li>
    </ul>
    </div>
</div>
</body>
</html>

JavaScript

console.log('starting demo');

var data = { name: "John Smith", age: 32, jobs: [ 
    {title: 'Programmer', place: 'SuperMegaSoft'},
    {title: 'Cook', place: 'Tony\'s Trattoria'},
    {title: 'Painter'},
] };

var directives = {
    'li': {
        'job<-jobs':{
            '.title': 'job.title',
            '.place': function(ctx){
                return (!!ctx.item.place) ? 'at '+ctx.item.place : '(independent)';
            }
        }
    }
};

$p('#main').autoRender(data);
$p('#jobs').autoRender(data);