DOM event listener

tetra.view.register('searchBar', {  

    scope: 'search',  
    use: ['searchManager'],  

    constr: function(me, app, _) { return {  
  
        events: {
            user: {
                'click': {
                    '#search-bar button': function(e, elm) {  
                        var query = elm.siblings('input').val();  
                        app.notify('search query', query);  
                    }
                }
            },

            controller: {  
                // Controller listeners
            }
        },

        methods: {} 
    };}
});
        

View listener + ORM call

tetra.controller.register('searchManager', {
    
    scope: 'search',
    use: ['searchResult'],
    
    constr: function(me, app, page, orm) { return {
        
        events: {
            view: {
                'search query': function(query){
                    orm('searchResult').fetch({q: query});
                }
            },

            model: {
                // model listeners
            }
            
            controller: {}
        },

        methods: {}
    };}
});
        

Class definition

tetra.model.register('searchResult', {

    scope: 'search',

    req: {
        fetch: {  
            url: '/member/search'  
        }
    /*, save: {}
      , del: {}
      , reset: {} */
    },
  
    attr: {
        memberId: 0,  
        name: '',  
        desc: ''
    },  
  
    methods: function(attr) { return {  
        validate: function(attr, errors){  
            if (attr.name == '') errors.push('name');  
            if (attr.desc == '') errors.push('desc');  
            return errors;  
        }  
    };}  
  
});
        

Standard format supported by Tetra

{  
    "status": "SUCCESS/FAIL",  
    "data": {  
        4: {
            memberId : 4,  
            name : 'John Doe',  
            desc : 'Developer at Viadeo'
        },
        9: {...},  
        37: {...}  
    },  
    "alerts": {  
        "attr1": "alert message 1",  
        "attr2": "alert message 2"  
    },  
    "errors": [  
        "error message x",  
        "error message y"  
    ],  
    "count": 10  
}
        

Model listener

tetra.controller.register('searchManager', {
    
    scope: 'search',
    use: ['searchResult'],
    
    constr: function(me, app, page, orm) { return {
        
        events: {
            view: {
                // view listeners
            },

            model: {
                'searchResult': {
                    'append': function(col_popover) {
                        app.notify('display results', col);
                    }
                }
            }
            
            controller: {}
        },

        methods: {}
    };}
});
        

Controller listener

tetra.view.register('searchBar', {  

    scope: 'search',  
    use: ['searchManager'],

    constr: function(me, app, _) { return {  
  
        events: {
            user: {
                // DOM listeners
            },

            controller: {  
                'display results' : function(col){
                    var results = [];
                    for(var i, len=col.length; i < len; i++) {
                        results.push(col[i].getAll());
                    }
                    app.exec(...);
                }
            }
        },

        methods: {} 
    };}
});
        

Javascript evaluation and DOM insertion

app.exec(
        'result_list',
        {results: [{name:"John Doe", desc:"Developer..."}, ...]},
        function(html) {  
            _('body').append(html);
        }
    );
            

HTML template

<script id="tmpl_result_list" type="text/html">
    <ol>
    {% for(var i=0, len=results.length; i < len; i++) { %}
        <li class="user">   
            <h2> {%=results[i].name%}</h2>  
            {%=results[i].desc%}
        </li>
    {% } %}
    </ol>
</script>
            

• class="bootnode"
• data-app or data-comp: the source to load
• data-event: event listened (click, mouseover or focus)

<div class="bootnode" data-view="search/searchBar" data-event="click"> 
...  
</div>
            

associated with the dependency management system

<div class="bootnode" data-comp="searchPackage" data-event="click">
...  
</div> 
            

where myPackage is a script available on COMP_PATH/myPackage.js