Weex使用 mustache 的语法 ({{...}}
) 来对 <template>
中的模板和 <script>
里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。
数据绑定路径
<template>
<div>
<text style="font-size: {{size}}">{{title}}</text>
</div>
</template>
<script>
module.exports = {
data: {
size: 48,
title: 'Alibaba Weex Team'
}
}
</script>
上面的代码会把 title
和 size
的数值绑定到模板内容上。
我们也可以通过 .
符号来绑定数据结构中的字段。看一下下面的代码片段:
<template>
<div>
<text style="font-size: {{title.size}}">{{title.value}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: {
size: 48,
value: 'Alibaba Weex Team'
}
}
}
</script>
数据绑定表达式
进行数据绑定时,Weex 支持一些简单的 JavaScript 表达式,例如:
<template>
<div style="flex-direction: row;">
<text>{{firstName + ' ' + lastName}}</text>
</div>
</template>
<script>
module.exports = {
data: {
firstName: 'John',
lastName: 'Smith'
}
}
</script>
这些表达式会在当前的上下文中进行运算。