資訊專欄INFORMATION COLUMN
摘要：指令在上使用元素沒有設(shè)置屬性時(shí)，自動(dòng)設(shè)置綁定的狀態(tài)屬性名為屬性。
一個(gè)模塊的template模板、JavaScript和css之間的關(guān)系其實(shí)可以如下圖表示：
如果你了解Angular、Vue動(dòng)態(tài)模板，那你將會(huì)對(duì)Amaple的模板感到很熟悉，在Amaple中，template模板也是基于模板指令和狀態(tài)數(shù)據(jù)的動(dòng)態(tài)模板引擎，當(dāng)一個(gè)狀態(tài)數(shù)據(jù)改變時(shí)，在template模板中與它綁定的dom元素將自動(dòng)作出相應(yīng)的更新，所以此時(shí)你只需關(guān)心模塊內(nèi)的狀態(tài)數(shù)據(jù)，而不需去理會(huì)視圖層的更新。
指令類型指令分為動(dòng)態(tài)指令和靜態(tài)指令，動(dòng)態(tài)指令的值會(huì)被當(dāng)作JavaScript代碼被解析，所以它們可以獲取并綁定狀態(tài)屬性的值，如:if、:for等指令；而靜態(tài)屬性的值只會(huì)被當(dāng)做普通的字符串處理，無法綁定狀態(tài)屬性，如:module和:ref指令。
使用插值表達(dá)式輸出文本我們直接先看看在index.html模板中使用插值表達(dá)式輸出文本和屬性，你應(yīng)該會(huì)很快明白是怎么回事了：
{{ text }} direct to page about
【注意】①. 模板中的取值范圍為當(dāng)前模塊的狀態(tài)數(shù)據(jù)對(duì)象，在上面示例中，解析掛載時(shí){{ text }}被替換為狀態(tài)數(shù)據(jù)的text屬性值；
②. 插值表達(dá)式的{{}}將被作為JavaScript代碼解析，如你可以這樣寫{{ text === 1 ? "show" : "hidden" }}，表示text屬性值等于數(shù)字1時(shí)輸出"show"，否則輸出"hidden"。
# 插值表達(dá)式在style與class屬性的特殊表現(xiàn)
插值表達(dá)式一般輸出字符串（狀態(tài)屬性值不為字符串時(shí)將會(huì)調(diào)用該值的toString函數(shù)），但在style屬性上使用插值表達(dá)式時(shí)會(huì)將一個(gè)object對(duì)象轉(zhuǎn)換為內(nèi)聯(lián)樣式的格式，在class屬性上使用時(shí)會(huì)將一個(gè)array數(shù)組轉(zhuǎn)換為以空格隔開的字符串：
循環(huán)渲染輸出dom元素
在實(shí)際項(xiàng)目中，經(jīng)常會(huì)遇到根據(jù)數(shù)據(jù)庫(kù)的數(shù)據(jù)來渲染一個(gè)列表的需求，如用戶列表、使用表格展示數(shù)據(jù)等，此時(shí)我們就需要使用模板指令:for來完成需求：
- {{ item }}
# 在上使用:for
你可以在上使用:for來循環(huán)渲染多個(gè)dom元素：
list.firstName
list.lastName
它將被渲染為：
George
Bush
Jake
Wood
# 使用:for指令遍歷字符串
當(dāng):for指令遍歷字符串時(shí)，item值為字符串每個(gè)字符：
Amaple由
[{{ char }}]
組成
# 使用:for指令遍歷數(shù)字
當(dāng):for指令遍歷數(shù)字時(shí)，item值為從0開始累加的索引數(shù)字：
小于5的非負(fù)數(shù)有
[{{ num }}]
【注意】使用狀態(tài)數(shù)組應(yīng)該避免直接通過索引操作，如this.state.list [ 0 ] = "banana"將不會(huì)觸發(fā)自動(dòng)更新。
通過條件判斷顯示與隱藏元素
我們經(jīng)常需要通過條件判斷來確定應(yīng)該顯示哪一部分的內(nèi)容，以簡(jiǎn)單的用戶登錄為例，當(dāng)有用戶信息時(shí)顯示信息，沒有時(shí)顯示登錄按鈕，此時(shí)可以使用模板指令的:if、:else-if、:else，它與我們熟知的if、else if及else關(guān)鍵字的用法相同：
{{ userInfo.username }}
當(dāng)初始化時(shí)module.state.userInfo=null，它將被渲染為：
當(dāng)mounted鉤子函數(shù)觸發(fā)后module.state.userInfo={ username: "Tom", avatar: "tom_101101.jpg" }，它將被渲染為：
Tom
# 在上使用條件判斷
它將的子元素作為一個(gè)整體進(jìn)行條件判斷，并在渲染的時(shí)候去掉父元素。
content1
content2
content3
content4
content5
當(dāng)module.state.show=true時(shí)將被渲染為：
content1
content2
當(dāng)module.state.show=false時(shí)將被渲染為：
content3
content4
當(dāng)module.state.show=1時(shí)將被渲染為：
content5
# :for和:if在同一個(gè)元素上使用
:for指令的解析優(yōu)先級(jí)高于:if，這意味著所有循環(huán)渲染的元素都會(huì)判斷:if的條件。
- {{ item }}
它將被渲染為：
- orange
- grape
【注意】帶有:else-if或:else屬性元素的上一個(gè)兄弟元素必須使用了:if或:else-if指令，且:else屬性是沒有值的
模塊函數(shù)與事件綁定
在狀態(tài)數(shù)據(jù)對(duì)象上定義的函數(shù)叫做模塊函數(shù)，我們?cè)谧幽K主動(dòng)向父模塊傳值時(shí)提到過它。除了傳值的作用外，模塊函數(shù)還可當(dāng)做事件綁定函數(shù)來使用，如下面事件綁定的示例，在上使用:on指令聲明click事件并指定回調(diào)函數(shù)。
【注意】模塊函數(shù)內(nèi)的this指針指向當(dāng)前模塊的狀態(tài)數(shù)據(jù)對(duì)象（即module.state對(duì)象），它也不可使用ES6的箭頭函數(shù)（Arrow function），因?yàn)檫@樣會(huì)導(dǎo)致函數(shù)內(nèi)this指針指向不正確而出錯(cuò)。
計(jì)算屬性
假如項(xiàng)目的某個(gè)模塊中定義了兩個(gè)狀態(tài)屬性，分別為產(chǎn)品品牌brand、產(chǎn)品型號(hào)model，此時(shí)你需要在模板中輸出品牌與型號(hào)的組合，此時(shí)你可能會(huì)這樣寫：
{{ brand }} {{ model }}
這沒有任何問題，但當(dāng)有多處都需輸出同樣信息時(shí)，使用多個(gè)差值表達(dá)式就顯得有點(diǎn)麻煩，所以對(duì)于如需要多次拼接字符串或其他任何較為復(fù)雜處理的輸出，應(yīng)該使用計(jì)算屬性來實(shí)現(xiàn)，像這樣：
{{ productName }}
表單的雙向綁定
在表單元素上使用:model指令即可實(shí)現(xiàn)表單輸入值與狀態(tài)屬性的雙向綁定，如下：
可使用model指令的表單元素有type為任何值的input、textarea和select。
# :model指令在checkbox上使用
checkbox綁定的狀態(tài)屬性值必須為Array類型，且當(dāng)多個(gè)checkbox綁定同一個(gè)狀態(tài)屬性時(shí)，被選中checkbox的值將會(huì)保存在此數(shù)組中。
# :model指令在radio上使用
radio元素沒有設(shè)置name屬性時(shí)，自動(dòng)設(shè)置綁定的狀態(tài)屬性名為name屬性。
以上所有指令為動(dòng)態(tài)指令，接下來的是靜態(tài)指令
設(shè)置當(dāng)前頁(yè)面顯示的標(biāo)題
當(dāng)url跳轉(zhuǎn)更新模塊時(shí)，我們希望標(biāo)題隨模塊改變，此時(shí)我們可使用:title指令來設(shè)置標(biāo)題，它只能用于一個(gè)模塊的
...
當(dāng)然很多時(shí)候一個(gè)頁(yè)面將同時(shí)加載多個(gè)不同層級(jí)的模塊，此時(shí)框架將會(huì)從上到下、從外到內(nèi)的順序解析并更新模塊，當(dāng)以這樣的順序解析時(shí)將會(huì)獲取第一個(gè):title不為空的標(biāo)題作為更新標(biāo)題，而會(huì)自動(dòng)忽略后面模塊所定義的標(biāo)題，所以建議標(biāo)題應(yīng)該在最外層的主模塊中定義。
引用元素
有時(shí)候必須操作dom元素如聚焦input元素，我們必須獲取此input元素的對(duì)象并調(diào)用input.focus函數(shù)，這時(shí)可以在此input元素上使用:ref指令定義一個(gè)引用，然后調(diào)用am.Module對(duì)象的成員函數(shù)refs( refName )獲取被引用的dom元素：
當(dāng)多個(gè)元素的:ref值設(shè)置同一個(gè)引用名時(shí)，使用refs函數(shù)獲取該引用名的dom元素時(shí)將會(huì)返回一個(gè)包含所有該引用名的元素?cái)?shù)組。
繼續(xù)學(xué)習(xí)下一節(jié)：【AmapleJS教程】4. 組件
也可回顧上一節(jié)：【AmapleJS教程】2. 模塊
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115596.html
相關(guān)文章
-
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)（state）
摘要：指令在上使用元素沒有設(shè)置屬性時(shí)，自動(dòng)設(shè)置綁定的狀態(tài)屬性名為屬性。
一個(gè)模塊的template模板、JavaScript和css之間的關(guān)系其實(shí)可以如下圖表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337);
如果你了解Angular、Vue動(dòng)態(tài)模板，那你將會(huì)對(duì)Amaple的模板感到很熟悉，在Amaple中，template...
-
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)（state）
摘要：指令在上使用元素沒有設(shè)置屬性時(shí)，自動(dòng)設(shè)置綁定的狀態(tài)屬性名為屬性。
一個(gè)模塊的template模板、JavaScript和css之間的關(guān)系其實(shí)可以如下圖表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337);
如果你了解Angular、Vue動(dòng)態(tài)模板，那你將會(huì)對(duì)Amaple的模板感到很熟悉，在Amaple中，template...
-
【Amaple教程】2. 模塊
摘要：模塊更新時(shí)部分不需被替換的模塊，檢測(cè)到或參數(shù)變化增加移除或修改參數(shù)時(shí)觸發(fā)，如所有頁(yè)面的部分總是不變，此時(shí)它將不會(huì)被替換。模塊函數(shù)將在模板指令與狀態(tài)數(shù)據(jù)中講解繼續(xù)學(xué)習(xí)下一節(jié)教程模板指令與狀態(tài)數(shù)據(jù)也可回顧上一節(jié)教程啟動(dòng)路由
正如它的名字，模塊用于amaplejs單頁(yè)應(yīng)用的頁(yè)面分割，所有的跳轉(zhuǎn)更新和代碼編寫都是以模塊為單位的。
定義一個(gè)模塊
一個(gè)模塊由標(biāo)簽對(duì)包含，內(nèi)部分為template模板...
發(fā)表評(píng)論
0條評(píng)論
閱讀 3968·2021-11-11 10:58
閱讀 3341·2021-09-26 09:46
閱讀 1920·2019-08-30 15:55
閱讀 987·2019-08-30 13:52
閱讀 1954·2019-08-29 13:11
閱讀 3035·2019-08-29 11:27
閱讀 1525·2019-08-26 18:18
閱讀 2647·2019-08-23 14:17
