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