Templar

Tagged template compilation

View project onGitHub

About

Inline tagged templating and template compilation from text inputs and hierarchical data, requires jQuery with Select2.

Supports template (de)normalization, custom template format. Use it to build Underscore/Jade/Angularjs templates dynamically or whatever else you can think of. It's used by bipio

Try it

just start typing, 'Ctrl+i' opens the tag menu where you want the tag to appear.

Generates



            
How it works


            Templar interpolates a select2 dropdown into your text for easy template variable selection, invoked with
            a keypress. Once invoked, it opens the dropdown so search away.  Up/Down/Enter/Escape behaves intuitively.
            Attribute selection normalizes to a dot notation path or config controlled delimiter.  Eg : toppings > cheese  is toppings.cheese in the computed
            template.
            


            To use, attach it to a target div
            

    $('.someclass').templar(
        {
            tags: {
                'toplevel' :
                    label : 'Top Level Label',
                    data : [
                        'sub selection 1',
                        'sub selection ..',
                        'sub selection (n)',
                    ]
            }
        }
    );
            

            

            To extract the computed template :
            
    // compute the template
    example.templar('computeTemplate');
    // retrieve it
    alert(example.attr('data-template'));
            


            

            or hook the event
            
example.on('templar-template', function(ev) {
    console.log('template is now ' + $(this).attr('data-template));
});
            


            

              
Config

              Several config options are available for basic behavioral and template (de)normalizing customizations.
              

                
                  

                    name
                    description
                    example
                  

                
                
                  

                    tags
                    
                      hierarchical data, up to depth 2 only for now
                      


                      no default
                    		
                    
                      
    tags : {
        'toppings' : {
            'label' : 'Toppings',
            'data' : [
                {
                    label : "Cheezzzze",
                    value : 'cheezz'
                },
                'cheese',
                'tomatoes',
                'mozzarella',
                'mushrooms',
                'pepperoni',
                'onions'
                ]
            },
            'mood' : {
                label : 'Mood',
                data : [
                    'fat',
                    'sassy'
                ]
            },
            'base' : {
                label : 'Base',
                data : [
                    'thin',
                    'pie',
                    'superthick'
                ]
            }
    }
                      

                    		
                  

                  

                    template
                    
                      Template pattern string literal


                      default 'value'.
                    		
                    
                      template : '[%value%]'
                    
                  

                  

                    templateKey
                    
                      Template key literal.  Value is interpolated into key literal.


                      default 'value'.
                    		
                    
                      templateKey : 'value'
                    
                  

                  

                    delimiter
                    Path Hierarchy Delimiter


                      default '.'
                    		
                    
                      delimiter : '#'
                    
                  

                  

                    data
                    Initial Template data


                    		
                    
                      data : 'Hello [%name%]!'
                    
                  

                  

                    keyEvent
                    Delimiter key event callback, event as first argument.


                      default: '['
                      
                        keyEvent : function(ev) {
                        return ev.keyCode === 219;
                        }
                    		
                    
                      
    keyEvent : function(ev) {
        return ev.shiftKey && ev.keyCode === 220;
    }

                    		
                  

                  

                    character
                    Character helper, hacks out previous delmiter after variable selection


                      default '['
                    		
                    
                      character : '['
                    
                  

                
              

            


            

              
Thanks! - mjp