Calculations You can persorm calculations inside expressions


Code:

{{'Hello' + 'World'}}
2+2 = {{2+2}}

Result:

{{'Hello ' + 'World'}}
2+2 = {{2+2}}

Attribute parsing You can specify template name and JSON data in DIV to compile it quickly.


Code:

<code data-compile='{"name":"Lorem","surname":"Ipsum"}'>
<!-- empty -->
</code>

Result:

{{name}} {{surname}}

DOM Compilation Hooks You can specify JavaScript hook to handle element compilation.


Code:

<code data-compile='{"login":"Test User","email":"user@mail.com"}' data-k-on-compile="onDivCompile();">
<b id="boo"><b/>
</code>

Result:

Login: {{login}} Mail: {{email}}

Filters

You can pass values of object inside filters


Code:

Price :{{price|currency}}
Original JSON:
{{this|json}}

Result:

Price :{{price|currency:'€'}}
Original JSON:
{{this|json}}

Recursive parsing You can parse an array inside your object using templates


Code:

<script type='text/karkas' name='listBox'>
   <b>{{title}}</b>
   <ul>
     {{items|template: "listBoxItem"}}
   </ul>
</script>

<script type='text/karkas' name='listBoxItem'>
  <li>
   <label>
       <input type="checkbox" id="item_{{id}}" />
       {{title}}
   <label/>
  </li>
</script>

<script>
   var listBoxes = [
       {
           title: 'ToDo List',
           items: [
               {
                   id: 0,
                   title: 'Wash dishes'
               },
               {
                   id: 0,
                   title: 'Clear carpet'
               },
           ]
       },
       {
           title: 'Meetups',
           items: [
               {
                   id: 0,
                   title: 'Meet with Freddy'
               },
               {
                   id: 0,
                   title: 'Corporative at sunday'
               },
           ]
       }
   ];

   karkas.compile('listBox', listBoxes, '#listBoxDemo');
</script>

Result:

List parsing Parsing an array of objects or a single JSON