Saker

Syntax Reference

Rendering HTML

The default Saker template language is HTML. Rendering HTML from Saker is no different than in an HTML file. A Saker template file with the following markup:

<p>Hello World</p>

Is rendered unchanged as <p>Hello World</p> by the server.

Saker syntax

Saker uses the @ symbol to transition from HTML to JavaScript. Saker evaluates JavaScript expressions and renders them in the HTML output.

Data (will pass to template):

{
    name: 'Saker',
    author: 'Sky'
}

Template:

<p>@name</p>

Would render:

<p>Saker</p>

Note: you can also visit data model with model namespace, such as, to visit name, use @name, @model.name or @this.model.name are all correct.

HTML containing @ symbols may need to be escaped with a second @ symbol. For example:

<p>eshengsky@@163.com</p>

would render the following HTML:

<p>eshengsky@163.com</p>

Internal object

Saker internal object include:
  • model - the data model passed to template
  • raw - disable HTML endcode, see here
  • layout - the layout file name which you want to render in a body view, see here
  • renderBody - render a body view in layout view, see here
  • renderPartial - render a partial view, see here

You can visit them with this or saker in template file. saker is an alias for this. such as function raw:

@this.raw("<span>Hello World</span>")

@saker.raw("<span>Hello World</span>")

Implicit expressions

Implicit Saker expressions start with @ followed by JavaScript code. For example:

<p>@JSON.parse("true")</p>

Explicit expressions

Explicit Saker expressions consists of an @ symbol with balanced parenthesis. For example, to render the locale date info:

<p>@(new Date().toLocaleString())</p>

Any content within the @() parenthesis is evaluated and rendered to the output.

Implicit expressions generally cannot contain spaces. For example:

<p>@1 + 1</p>

Which renders the following HTML:

<p>1 + 1</p>

Expression encoding

JavaScript expressions that evaluate to a string are HTML encoded. For example, the following Saker markup:

@("<span>Hello World</span>")

Renders this HTML:

&lt;span&gt;Hello World&lt;/span&gt;

To disable HTML encode, please call raw function:

@this.raw("<span>Hello World</span>")

Would render:

<span>Hello World</span>

Code blocks

Saker code blocks start with @ and are enclosed by {}. Unlike expressions, JavaScript code inside code blocks is not rendered. 

@{
    var output = "Hello World";
}

<p>The rendered result: @output</p>

Would render:

<p>The rendered result: Hello World</p>
Implicit transitions

The default language in a code block is JavaScript, but you can transition back to HTML. HTML within a code block will transition back into rendering HTML:

@{
    var inJs = true;
    <p>Now in HTML, was in JavaScript @inJs</p>
}
Explicit transition

To define a sub-section of a code block that should render HTML, surround the characters to be rendered with the Saker <text> tag:

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <text>Name: @person.Name</text>
}

You generally use this approach when you want to render HTML that is not surrounded by an HTML tag. Without an HTML or Saker tag, you get a syntax error.

Note: the <text> won't be included in the output to the browser.

Control Structures

Control structures are an extension of code blocks. All aspects of code blocks (transitioning to markup, inline JavaScript) also apply to the following structures.

Conditionals

Include @if, else if, else, @switch.

The @if family controls when code runs:

@if (value % 2 == 0)
{
    <p>The value was even</p>
}

else and else if don't require the @ symbol:

@if (value % 2 == 0)
{
    <p>The value was even</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value was not large and is odd.</p>
}

You can use a switch statement like this:

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number was not 1 or 1337.</p>
        break;
}
Looping

Include @for, @while, @do while

You can render templated HTML with looping control statements. For example, to render a list of people:

@{
    var people = [{
        name : "Jack",
        age : "18"
    }, {
        name : "Lucy",
        age : "20"
    }]
}

You can use any of the following looping statements:

@for

@for (var i = 0; i < people.length; i++)
{
    var person = people[i];
    <p>Name: @person.name</p>
    <p>Age: @person.age</p>
}

@while

@{ var i = 0; }
@while (i < people.length)
{
    var person = people[i];
    <p>Name: @person.name</p>
    <p>Age: @person.age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.name</p>
    <p>Age: @person.age</p>

    i++;
} while (i < people.length);
Exception

Include @try catch finally

@try{
    throw 'some error';
}catch(e){
    <p>Has Error!</p>
}finally{
    <p>Finally!</p>
}
Comments

Include @//, @* *@

Saker supports JavaScript and HTML comments. The following markup:

@{
    /* JavaScript comment. */
    // Another JavaScript inline comment.
}
<!-- HTML comment -->
<p>Hello World</p>

Is rendered by the server as:

<!-- HTML comment -->
<p>Hello World</p>

If you want to add comments in HTML and don't want to output the comments to browser, you can use Saker comments:

@// Saker inline comment
@*
  Saker multi-line comment
*@
<p>Hello World</p>

Would render:

<p>Hello World</p>

Layout

To render layout view, you should set this.layout = 'layoutName' in body view, and must call renderBody function in layout view.

index.html (body view):

@{ this.layout = 'layout'; }

<p>This is body view.</p>

layout.html (layout view):

<html>
    <body>
        <h2>Hello</h2>
        @this.renderBody()
    </body>
</html>

Would render:

<html>
    <body>
        <h2>Hello</h2>
        <p>This is body view.</p>
    </body>
</html>

this.layout can be assigned to the layout file name or path, Saker will try to read the file content as layout template. If you set this.layout = null or this.layout = '' or this.layout = false, Saker won't render any layout. If you do NOT set layout explicitly, it will render the default layout file according to config.defaultLayout.

this.renderBody() indicates where to render body view in current layout template.

Partial

To render a partial view, call this.renderPartial function with the partial file name as parameter.

index.html (body view):

<div>
    @this.renderPartial('index_partial')
</div>

index_partial.html (partial view):

<h5>This is partial view.</h5>

Would render:

<div>
    <h5>This is partial view.</h5>
</div>