Skip to content

dannyrich/simpleTemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

simpleTemplate

An extremely basic javascript/html template system. An HTML string is returned to be inserted into the DOM manually, for minimal page redrawing.

##To use: The object _template is added to the window scope.

Call the _template constructor giving two arguments: 1. The template as a string 2. The data to fill the template with.

    var tempObj = _template(templateString, data);

The parameters in the template string should be surrounded by double curly brackets: {{ExampleParam}}.

To get the HTML as a string from the _template object, call _template.getHTML();

###Example

<script language="javascript">
    var data = {
            name: 'Danny Richelieu',
            site: 'Github',
            owner: false,
            date: (new Date()).toJSON().slice(0, 10)
        },
        tempString = document.getElementById('templatestring').innerHTML;
    
    var temp = _template(tempString, data);
    
    document.getElementById('fillhere').innerHTML = temp.getHTML();
</script>

<script language="template" id="templatestring">
    <div class="block">
        <h1>{{name}}</h1>
        <div>is visiting {{site}}</div>
        {{@if:Owner}}
            <div>{{name}} owns {{site}}</div>
        {{@end}}
        <div>on {{date}}</div>
    </div>
</script>

You can also send an array of objects as the data parameter to reuse the template.

##Additional Methods To reuse the template with a different dataset: _template.setData(newdata);

To reuse the data with a different template: _template.setTemplate(newtemplate);

##Template Options To fill the template with a key's value in the data object, surround the key's name with curly brackets in the template string: {{ObjectKey}}

The keys are all case insensitive to make this system as simple as possible for the user.

Very simple if statements can be inserted by using {{@if:ObjectKey}} and ending the block with {{@end}}. The system checks if ObjectKey exists in the data object and that the key's value is truthy. If it is, whatever is in the block is rendered in the resulting HTML string. Otherwise it is removed.

  • Note: this is an extremely rudimentary addition -- nesting another if statement within an if statement will break it at this time.

About

An extremely basic javascript/html template system

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published