rivets

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>

<div id="profile">
  <p rv-add-class='10'>Name: <span data-text="profile:first_name"></span></p>
  <p>Role 0: <span data-text='profile:role[0].name'></span></p>
</div>

JavaScript

jQuery(document).ready(function() {
    
    var response = {
        first_name:'Test user', 
        role: [
            {name: 'role0_name'}, 
            {name: 'role1_name'}
        ]
    };
    var $ctx = $('#profile');
    
    console.log("response = %o", response);
    console.log("ctx = %o", $ctx);
    
    
    var view = rivets.bind($ctx, {profile: response});
    console.log("view = %o", view);
    console.log(rivets.binders);
    rivets.binders['add-class'] = function (el, value) {
				console.log(el, value, 10);
        if (el.addedClass) {
            el.classList.remove(el.addedClass);
            delete el.addedClass;
        }

        if (value) {
            el.classList.add(value);
            el.addedClass = value;
        }
    };
    
});