Weex使用mustache的語法({{...}})來對<template>中的模板和<script>里的數(shù)據(jù)進(jìn)行綁定. 一旦數(shù)據(jù)額模板綁定了, 數(shù)據(jù)上的修改會實(shí)時(shí)的在模板內(nèi)容中生效.
綁定數(shù)據(jù)path
<template>
<container>
<text style="font-size: {{size}}">{{title}}</text>
</container>
</template>
<script>
module.exports = { data: { size: 48, title: 'Alibaba Weex Team' } }
</script>
上面的代碼會把title和size的數(shù)值綁定到模板內(nèi)容上.
我們也可以通過.符號來綁定數(shù)據(jù)結(jié)構(gòu)中的字段. 看一下下面的代碼片段:
<template>
<container>
<text style="font-size: {{title.size}}">{{title.value}}</text>
</container>
</template>
<script>
module.exports = { data: { title: { size: 48, value: 'Alibaba Weex Team' } } }
</script>
In-template 表達(dá)式
進(jìn)行數(shù)據(jù)綁定時(shí), Weex支持一些簡單的javascript表達(dá)式,例如:
<template>
<container style="flex-direction: row;">
<text>{{firstName + ' ' + lastName}}</text>
</container>
</template> <script> module.exports = { data: { firstName: 'John', lastName: 'Smith' } } </script>
這些表達(dá)式會在當(dāng)前的上下文中進(jìn)行演算.
NOTE: 每個(gè)綁定只能包含單個(gè)表達(dá)式
數(shù)據(jù)綁定中的特殊屬性樣式: style 或 class
組件的樣式能夠通過style屬性進(jìn)行綁定:
<template>
<text style="font-size: {{size}}; color: {{color}}; ...">...</text>
</template>
樣式也能夠通過class屬性實(shí)現(xiàn)綁定,多個(gè)classname通過空格分隔:
<template>
<container>
<text class="{{size}}"></text>
<text class="title {{status}}"></text>
</container>
</template>
在上面的代碼中如果{{size}} 和 {{status}} 是空值, 就只有class="title" 會被渲染.
事件處理器: on...
以on...開頭的就是用于指定事件處理器的屬性, 屬性名中'on'之后的部分就是事件的類型, 屬性的值就是對應(yīng)進(jìn)行事件處理的函數(shù)名. 不需要添加mustache語法中的大括號或者函數(shù)調(diào)用時(shí)的圓括號.
<template>
<text onclick="toggle">Toggle</text>
</template> <script> module.exports = { methods: { toggle: function () { // todo } } } </script>
if & repeat
if 屬性能夠通過true/false值控制組建是否顯示.
<template>
<container style="flex-direction: column;">
<text onclick="toggle">Toggle</text>
<image src="..." if="{{shown}}"></image>
</container>
</template> <script> module.exports = { data: { shown: true }, methods: { toggle: function () { this.shown = !this.shown } } } </script>
Weex通過repeat屬性來生成列表.
NOTE: 當(dāng)你修改 data 中的數(shù)組時(shí)埠通，在寫法上會受到一定的限制名眉，具體如下
直接通過 index 修改數(shù)組的某個(gè)項(xiàng)目 (如 vm.items[0] = {};) 是不會觸發(fā)視圖自動更新的。我們在數(shù)組的原型上提供了一個(gè)額外的方法：$set(index, item).
// 和 `example1.items[0] = ...` 作用相同坟乾，但會自動觸發(fā)視圖更新
example1.items.$set(0, { childMsg: 'Changed!'})
直接通過修改 length 來改變數(shù)組長度 (如 vm.items.length = 0) 也是不會觸發(fā)視圖自動更新的档桃。我們推薦您直接賦值一個(gè)新的空數(shù)組把舊的替換掉枪孩。
// 和 `example2.items.length = 0` 作用相同，但會自動觸發(fā)視圖更新
example2.items = []
static
static 屬性可以取消數(shù)據(jù)綁定機(jī)制，從而數(shù)據(jù)更新不會再同步到 UI 界面蔑舞。
<template>
<div static>
<text>{{ word }}</text>
</div>
</template> <script> module.exports = { ready: function() { this.word = 'Data changes' }, data: { word: 'Hello, static' } } </script>
如上所示拒担，添加 static 關(guān)鍵字，渲染結(jié)果會是 Hello, static攻询，相當(dāng)于渲染一個(gè)靜態(tài)的節(jié)點(diǎn)从撼，ready 函數(shù)中對數(shù)據(jù) word 的改變不會被監(jiān)聽，從而 text 值不會改變蜕窿。
static 屬性設(shè)計(jì)的目的是為了降低長列表谋逻、純靜態(tài)頁面的內(nèi)存開銷。小心的使用它桐经，因?yàn)樗赡軙袛嗄愕捻撁孢壿嫛?/p>
