TTML
TTML 是用来编写页面结构用的标签语言。
主要包括下面一些特性:
数据绑定
<!--ttml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: "Hello World!"
}
});
列表渲染
<!--ttml-->
<view tt:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
});
条件渲染
<!--ttml-->
<view tt:if="{{view == 'A'}}"> A </view>
<view tt:elif="{{view == 'B'}}"> B </view>
<view tt:else="{{view == 'C'}}"> C </view>
// page.js
Page({
data: {
view: "A"
}
});
模板
<!--ttml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: { firstName: "大林", lastName: "斯" },
staffB: { firstName: "吉尔", lastName: "丘" },
staffC: { firstName: "福", lastName: "罗思" }
}
});
事件
<!--ttml-->
<view bindtap="add"> {{count}} </view>
// page.js
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
});
}
});