SodaRender

###A lite angular-like template engine for JavaScript

##why using SodaRender?

####SodaRender is just 3KB in size. ####SodaRender has AngularJs Template like Apis. It will make your template file tidy, clearly to read. ####SodaRender reduces the error while cgi responses the data in unexpected way, such as losting some keys, error value types. ####SodaRender prevents XSS holes in your template file. ####SodaRender uses DOM parsor to render your template rather than string replacement, so it's more effective.

##who using sodaRender? SodaRender is currently using by QQ Tribes(兴趣部落) and other projects

##how to use SodaRender

###Examples

<html>
    <head>
        <title>
            SodaRender Examaple
        </title>
    </head>
    
    <div>
    <ul id="targetUl">
        <script type="text/soda" id="dataList">
            <li soda-repeat="item in list" soda-if="item.show">
            {{item.name}}
            </li>
        </script>
    </ul>
</div>
</html>

var templateStr = document.getElementById("dataList");
var target = document.getElementById("targetUl");

var data = {
    list: [
        {name: "A"},
        {name: "B"}
    ]
};

var result = sodaRender(templateStr, data);
target.appendChild(result);

##APIs Of SodaRender

sodaRender

USING : SodaRender(String templateStr, Object data)
DESCR : Using templateStr with data to render template
RETURN: DOM Fragment
the DOM Frament Object has a method innerHTML which will return the rendered HTML code.
Meanwhile, you can use it like a common DOM Node, such as appending it to your target node.

sodaFilter

USING : SodaFilter(String filterName, Function func(input, args...))
DESCR : Defining Filters, so you can use filters in template

##Template Language (AngularJs Template Like) ###Now, we just offer three directives as below. More will be added soon later. But the three directives are able to meet our daily needs. ####{{}}

out put expressions

{{item.name + 1}}

####soda-repeat

soda-repeat="item in array" soda-repeat="item in array track by index" USING : SodaRender(String templateStr, Object data)
DESCR : Using templateStr with data to render template

####soda-if

soda-if="item.show"

####soda-class

soda-class="currItem === 'list1' ? 'active' : ''"

####soda-src

soda-src="hello{{index}}.png"

####soda-bind-html

soda-bind-html="
click
"

####soda-style

soda-style="style"

####soda-*

soda-rx="{{rx}}%"

####filters

{{input|filte1:args1:args2...|filter2:args...}} how to define filters? Just using sodaFilter Method as methioned above. Here is an example.

SodaFilter('shortTitle', function(input, length){
        return (input || '').substr(0, length);
});

Template below

<div soda-repeat="item in list">
    <div class="title">
        {{item.title|shortTitle:10}}
    </div>
</div>

leuting/SodaRender

SodaRender

sodaRender

sodaFilter