English | 简体中文

Basic syntax

HTML

HTML part in the template, using the delimiter "<?" and "?>" as the beginning and end of syntax.

In the delimiters, you can write any JavaScript statements, such as:

<?for(var i=0; i<10; i++){?>
  <p>hello, world</p>
<?}?>

Have a tryView demo

Use the equal sign "=" to output the corresponding value:

<?for(var i=0; i<10; i++){?>
  <p>hello, world, <?=i?></p>
<?}?>

Have a tryView demo

Directly "@attribute" name to indicate an incoming object corresponding property.

If the object passed as follows:

{
  "title": "I'm the title",
  "favor": [
    "Football",
    "Basketball",
    "Table tennis",
    "Glass ball"
  ]
}

In the template, you can use @title, @favor respectively referenced incoming title, favor value:

<h1><?=@title?></h1>
<ul>
  <?for(var i=0; i<@favor.length; i++){?>
    <li><?=i?>:<?=@favor[i]?></li>
  <?}?>
</ul>

Have a tryView demo

XSS injection protection

"=" will prevent XSS injection automatically, and some harmful characters will be replaced, eg:

{
  "title": "<script>alert(0);</script>",
}
<h1><?=@title?></h1>

Eventually compile results is:

<h1>&lt;script&gt;alert(0);&lt;/script&gt;</h1>

If you don't want to filter the XSS, you can use "==" instead of "=", such as:

<h1><?==@title?></h1>

The result will be:

<h1><script>alert(0);</script></h1>

CSS

nodetpl allowed to define it's own templates CSS styles, and you don't worry about naming conflicts, because nodetpl have a mechanism to resolve conflicts style inheritance.

If write a template CSS, you need to define a root HTML element with a "$ROOT" id, then write the style directly in the template:

<style>
  h1 {
    font-size: 20px;
    color: #f00;
  }
  p {
    text-indent: 2em;
  }
</style>
<div id="$ROOT">
  <h1><?=@title?></h1>
  <?for(var i=0; i<10; i++){?>
    <p>hello, world, <?=i?></p>
  <?}?>
</div>

Have a tryView demo

Eh? Guards, so the style of writing would not have to overwrite the entire page?

It does not matter, nodetpl will not tolerate such low-level errors occur, eventually, nodetpl will add "#ROOT" id before each line styles, so it will not lead to a conflict of style inheritance.

Exception: if you need to define the style of "$ROOT", you need to write "$ROOT" qualifier, such as:

$ROOT {
  border: 1px solid #f00;
}

JavaScript

nodetpl allow to add JavaScript code calls itself, to facilitate you to do some work related event bindings.

In JavaScript code, nodetpl you can use the following variables:

Likewise, you do not need to worry about naming conflicts, because nodetpl make your script is executed in an anonymous function.

<div id="$ROOT">
  <h1><?=@title?></h1>
  <?for(var i=0; i<10; i++){?>
    <p>hello, world, <?=i?></p>
  <?}?>
</div>
<script>
var padding = '20';
ROOT.style.padding = padding + 'px';
// OR use jQuery
$(ROOT).css('color', '#f00');
console.log($DATA.title);
</script>

Have a tryView demo

Yes, although here you define a padding variable, but it is not executed in the window object, it will not contaminate the window.

How? With HTML / CSS / JS, it is not to be able to write what you want?

Then see if you played O(∩_∩)O

Communication