Data Binding

Use variables defined in Page.data. And refer variable with {{ mustache }} syntax.

Binding

Content

Page Data:

{
"data" : {
"title": "The lazy dog"
}
}

YAOML Content

YAOML:

<section class="breadcrumb">
<ul>
<li><navigator url="/pets">Pets</navigator></li>
<li>{{ title }}</li>
</ul>
</section>

Rendering:

<section class="breadcrumb">
<ul>
<li><navigator url="/pets">Pets</navigator></li>
<li>The lazy dog</li>
</ul>
</section>

Markdown Content

Markdown:

#{{ title }}
​
## Introduction
​
## Detail

Rendering:

#The lazy dog
​
## Introduction
​
## Detail

Text Content

Text:

{{ title }}
​
Introduction
Detail

Rendering:

The lazy dog
​
Introduction
Detail

Attribute

Refer variables at component attributes. ( YAOML Content only )

Page Data:

{
"data" : {
"id": "10283728",
"name": "goldfish"
}
}

YAOML:

<pet id="item-{{ id }}"> {{ name }} </pet>

Rendering:

<pet id="item-10283728"> goldfish </pet>

Style

Refer variables at page LESS file. but if the value changed after page render, the page doesn't be rendered again.

Page Data:

{
"data" : {
"id": "10283728",
"name": "goldfish",
"text_size":18
}
}

LESS:

.title {
font-size: "{{ text_size }}px"
}

Rendering:

.title {
font-size: "18px"
}

Set text_size after page rendered:

Yao({
load: ( data )=>{
this.setData( "text_size", 20 );
console.log(this.getData("text_size")); // text_size is 20
}
});

text_size has changed to 20, but font-size does not changed, still 18px:

.title {
font-size: "18px"
}

Setting

Use defined variables at page Setting file (JSON/YAML).

Page Setting:

{
"entries": [
{ "router":"/detail/{id_pet:[0-9a-zA-Z]+}.html", "ttl":3600 },
{ "router":"/detail/{id_pet:[0-9a-zA-Z]+}", "ttl":0 }
],
"imports": {
"photos":"/components/photos",
"navigator" : "@/yao/material-ui/navigator",
"button": "@/yao/material-ui/button"
},
"data" : {
"id_pet": 1782916731893,
"pet": {
"api" : "/yao-cli/unit-test-api/petshop/pet/get",
"query": {
"id": "{{ id_pet }}"
}
},
"title": "#{{id_pet}} {{ pet.name }} detail {{ sn }}",
"sn": "100010"
}
}

Rendering:

The variable sn not defined before referred, so ignored.

{
"entries": [
{ "router":"/detail/{id_pet:[0-9a-zA-Z]+}.html", "ttl":3600 },
{ "router":"/detail/{id_pet:[0-9a-zA-Z]+}", "ttl":0 }
],
"imports": {
"photos":"/components/photos",
"navigator" : "@/yao/material-ui/navigator",
"button": "@/yao/material-ui/button"
},
"data" : {
"id_pet": 1782916731893,
"pet": {
"api" : "/yao-cli/unit-test-api/petshop/pet/get",
"query": {
"id": "1782916731893"
}
},
"title": "#1782916731893 goldfish detail {{ sn }}",
"sn": "100010"
}
}

i18n

Use L[[ word ]] syntax, get language packages defined string. if the word is not defined in language package, then be rendered as word directly.

Language packages:

<!-- Lang: Chinese -->
<yao-lang lang="cn">
<data type="json">
{
"price": 120.00
}
</data>
<lang type="yaml">
Recommend Today: 今ζ—₯推荐
Loading: 读取中
More: ζ›΄ε€š
$: οΏ₯
</lang>
</yao-lang>
​
<!-- Lang: French -->
<yao-lang lang="fr">
<data type="json">
{
"price": 18.00
}
</data>
<lang type="yaml">
Recommend Today: RecommandΓ© aujourd'hui
Loading: Chargement
More: Plus
$: €
</lang>
</yao-lang>

Content:

<section class="focus">
<title>L[[ Recommend Today ]]</title>
<pirce>L[[ $ ]] {{ price }} </price>
<detail>L[[ Recommend Detail ]]</detail>
</section>

The language is an English rendering as:

<section class="focus">
<title>Recommend Today</title>
<pirce>$ 20.00 </price>
<detail> Recommend Detail </detail>
</section>

The language is a Chinese rendering as:

<section class="focus">
<title>今ζ—₯推荐</title>
<pirce>οΏ₯ 120.00 </price>
<detail> Recommend Detail </detail>
</section>

The language is a French rendering as:

<section class="focus">
<title>RecommandΓ© aujourd'hui</title>
<pirce>€ 18.00 </price>
<detail> Recommend Detail </detail>
</section>

Operations

Calculations in {{}}. Support Ternary, Arithmetic, Comparison, Logical and String operations.

Ternary

Simple

<pet hidden="{{ flag ? true : false }}" id="{{ id_pet }}"></pet>
<!-- flag == true -->
<pet hidden="true" id="10283728"></pet>
​
<!-- flag == false -->
<pet hidden="false" id="10283728"></pet>

Comparison Expression

<pet hidden="{{ type == 'cat' ? true : false }}" id="{{ id_pet }}"></pet>
<!-- type == 'cat' -->
<pet hidden="true" id="10283728"></pet>
​
<!-- type == 'dog' -->
<pet hidden="false" id="10283728"></pet>

Arithmetic Expression

<pet hidden="{{ count + 1 > 2 ? true : false }}" id="{{ id_pet }}"></pet>
<!-- count == 2 -->
<pet hidden="true" id="10283728"></pet>
​
<!-- count == 1 -->
<pet hidden="false" id="10283728"></pet>

String Expression

<pet hidden="{{ 'T:' + type == 'T:cat' ? true : false }}" id="{{ id_pet }}"></pet>
<!-- type == 'cat' -->
<pet hidden="true" id="10283728"></pet>
​
<!-- type == 'dog' -->
<pet hidden="false" id="10283728"></pet>

Arithmetic

Page Data:

{
"data" : {
"id_pet": "10283728",
"a": 1,
"b": 2,
"c": 3,
"d": 4
}
}

Plus +

<pet id="{{ id_pet }}">{{ a + b + 1 }}</pet>
​
<!-- Rendering -->
<pet id="10283728">4</pet>

Minus -

<pet id="{{ id_pet }}">{{ a - b - 1 }}</pet>
​
<!-- Rendering -->
<pet id="10283728">-2</pet>

Multiplication *

<pet id="{{ id_pet }}">{{ a * b * 2 }}</pet>
​
<!-- Rendering -->
<pet id="10283728">4</pet>

Division /

<pet id="{{ id_pet }}">{{ a / b / 2 }}</pet>
​
<!-- Rendering -->
<pet id="10283728">0.25</pet>
​
<pet id="{{ id_pet }}">{{ c / 0 }}</pet>
​
<!-- Rendering -->
<pet id="10283728">ERROR</pet>

Module %

<pet id="{{ id_pet }}">{{ d % c }}</pet>
​
<!-- Rendering -->
<pet id="10283728">1</pet>

String

Page Data:

{
"data" : {
"id_pet": "10283728",
"a": "The",
"b": "lazy",
"c": "dog"
}
}

Concatenation +

<pet id="{{ id_pet }}">{{ "The" + " " + b + " " + c }}</pet>
​
<!-- Rendering -->
<pet id="10283728">The lazy dog</pet>

Comparison

Equal to ==

<pet id="{{ id_pet }}">{{ a == 1 ? "Equal 1" : "Not Equal 1" }}</pet>
​
<!-- a == 1 -->
<pet id="10283728">Equal 1</pet>
​
<!-- a == 2 -->
<pet id="10283728">NOT Equal 1</pet>

Greater than >

<pet id="{{ id_pet }}">{{ a > 1 ? "Greater 1" : "Less than equal to 1" }}</pet>
​
<!-- a == 2 -->
<pet id="10283728">Greater 1</pet>
​
<!-- a == 1 -->
<pet id="10283728">Less than equal to 1</pet>

Less than <

<pet id="{{ id_pet }}">{{ a < 2 ? "Less than 2" : "Greater than equal to 2" }}</pet>
​
<!-- a == 1 -->
<pet id="10283728">Less than 2</pet>
​
<!-- a == 2 -->
<pet id="10283728">Greater than equal to 2</pet>

Greater than equal to >=

<pet id="{{ id_pet }}">{{ a >= 2 ? "Greater than equal to 2" : "Less than 2" }}</pet>
​
<!-- a == 2 -->
<pet id="10283728">Greater than equal to 2</pet>
​
<!-- a == 1 -->
<pet id="10283728">Less than 2</pet>

Less than equal to <=

<pet id="{{ id_pet }}">{{ a <= 1 ? "Less than equal to 1" : "Greater 1" }}</pet>
​
<!-- a == 1 -->
<pet id="10283728">Less than equal to 1</pet>
​
<!-- a == 2 -->
<pet id="10283728">Greater 1</pet>

Not equal to <>

<pet id="{{ id_pet }}">{{ a <> 1 ? "NOT equal to 1" : "Equal to 1" }}</pet>
​
<!-- a == 2 -->
<pet id="10283728">NOT equal to 1</pet>
​
<!-- a == 1 -->
<pet id="10283728">Equal to 1</pet>

Match ~

<pet id="{{ id_pet }}">{{ b ~ /^[0-9a-z]+$/ ? "Matched" : "Not matched"}}</pet>
​
<!-- b == "lazy" -->
<pet id="10283728">Matched</pet>
​
<!-- b == "Lazy" -->
<pet id="10283728">Not matched</pet>

Logical

OR ||

<pet id="{{ id_pet }}">{{ type == 'cat' || type == 'dog' ? "PET" : "OTHER" }}</pet>
<!-- type == 'cat' -->
<pet id="10283728">PET</pet>
​
<!-- type == 'dog' -->
<pet id="10283728">PET</pet>
​
<!-- type == 'tiger' -->
<pet id="10283728">OTHER</pet>

AND &&

<pet id="{{ id_pet }}">{{ type == 'cat' && id_pet == '10283728' ? "My Cat" : "OTHER" }}</pet>
<!-- type == 'cat' id_pet == '10283728' -->
<pet id="10283728">My Cat</pet>
​
<!-- type == 'cat' id_pet == '10283729' -->
<pet id="10283728">OTHER</pet>
​
<!-- type == 'dog' id_pet == '10283728' -->
<pet id="10283728">OTHER</pet>

NOT !

<pet hidden="{{ !flag ? true : false }}" id="{{ id_pet }}"></pet>
<!-- flag == true -->
<pet hidden="false" id="10283728"></pet>
​
<!-- flag == false -->
<pet hidden="true" id="10283728"></pet>

Object

Using .:Key or [:Key] access object attribute.

Page Data:

{
"data" : {
"pet": {
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},
"default": {
"attr":"eyes-color"
}
}
}

Content:

<pet id="item-{{ pet.id }}">
<name>{{ pet.name }}</name>
<type>{{ pet["type"] }}</type>
<attr>{{ pet.attrs[default.attr] }}</attr>
<ul>
<li type="weight">{{ pet.attrs.weight }} g</li>
<li type="height">{{ pet.attrs.height }} cm</li>
<li type="eyes-color">{{ pet.attrs["eyes-color"] }}</li>
</ul>
</pet>

Rendering:

<pet id="item-10283728">
<name>Cookie</name>
<type>cat</type>
<attr>blue</attr>
<ul>
<li type="weight">2000 g</li>
<li type="height">20 cm</li>
<li type="eyes-color">blue</li>
</ul>
</pet>

Array

Using .:Index or [:Index] access array item.

{
"data" : {
"pets": [
{
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},{
"id":"21687341",
"name":"Woloo",
"type":"dog",
"attrs": {
"weight": 2600,
"height": 36,
"eyes-color": "black"
}
}
]
}
}

Content:

<pets>
<pet id="item-{{ pets.0.id }}">
<name>{{ pets.0.name }}</name>
<type>{{ pets[0]["type"] }}</type>
<ul>
<li type="weight">{{ pets[0].attrs.weight }} g</li>
<li type="height">{{ pets[0].attrs.height }} cm</li>
<li type="eyes-color">{{ pets[0].attrs["eyes-color"] }}</li>
</ul>
</pet>
<pet id="item-{{ pets.1.id }}">
<name>{{ pets.1.name }}</name>
<type>{{ pets[1]["type"] }}</type>
<ul>
<li type="weight">{{ pets.1.attrs.weight }} g</li>
<li type="height">{{ pets.1.attrs.height }} cm</li>
<li type="eyes-color">{{ pets.1.attrs["eyes-color"] }}</li>
</ul>
</pet>
</pets>

Rendering:

<pets>
<pet id="item-10283728">
<name>Cookie</name>
<type>cat</type>
<ul>
<li type="weight">2000 g</li>
<li type="height">20 cm</li>
<li type="eyes-color">blue</li>
</ul>
</pet>
<pet id="item-21687341">
<name>Woloo</name>
<type>dog</type>
<ul>
<li type="weight">2600 g</li>
<li type="height">36 cm</li>
<li type="eyes-color">black</li>
</ul>
</pet>
</pets>