jeyson

JSO-NG

• JSO-NG is a templating language for serving json content.
• It extends the notion of compiling html templates to json.
• Every json is a valid template in itself.
• These templates are compiled in context of a scope.
• The templates can have expressions, which can manipulate scope and execute javascript.

Compiling Templates

var jsong         = require('jso-ng').create(),
    scope         = {message: 'Hello!'},
    templateJson  = '{"message": "{{message}}"}',
    compiled      = compiler.compile(scope , templateJson);

Expressions

An expression is defined as '{{expr}}'

Following template.json :

{
  "age": "{{21 + 33}}"
}

is compiled to

{
 "age": 54
}

Javascript as expression.

Any valid javascript snippet is a valid expression, e.g following template.json :

{
  "list"      : "{{'one,two,three,four,five'.split(',')}}",
}

is compiled to

{
 "list"    : ["one", "two", "three", "four", "five"],
}

Scopes

Any field on scope object, is available as local variable in expressions.

e.g. Given scope defined as :

var scope    = {message: "Hello !"},

then following template.json :

{
  "message": "{{message}}"
}

is compiled to

{
 "message": "Hello !"
}

Scope can have methods

e.g. Given scope defined as :

var scope = {
   message: function(){
     return "Hello !";
   }
};

then following template.json :

{
  "message": "{{message()}}"
}

is compiled to

{
 "message": "Hello !"
}

Directives

• Directive as a name starting with "@"
• Directive body is any field in json with child field's name starting with "@"'

E.g.

{
   "list"  : {
     "@repeat" : "name in ['one','two','three','four','five']",
     "id"      : "{{$index}}",
     "name"    : "{{name}}",
   }
}

• "list" value is directive body (has a directive child)
• @repeat is directive name
• count in [1,2,3,4,5] is directive argument

It will compile to following json :

{
  "list": [ {"id": "1","name" : "one"},
            {"id": "2","name" : "two"},
            {"id": "3","name" : "three"},
            {"id": "4","name" : "four"},
            {"id": "5","name" : "five"}];
}

Inbuilt Directives

Custom Directives

• Modifying
• Modifying
• Replacing directive contents
• Source code of inbuilt directives