在中繼器的使用過(guò)程中，你知道該如何判斷中繼器是否包含特定值嗎？或許你可以使用監(jiān)聽(tīng)器，在不刷新中繼器的前提下，分別判斷每一行的值。本篇文章里，作者便做了分析總結(jié)，一起來(lái)看。

前言

在電子商務(wù)應(yīng)用類原型中，將商品添加到購(gòu)物車(chē)時(shí)，應(yīng)該先檢查該商品是否已經(jīng)存在于購(gòu)物車(chē)中，如果已經(jīng)存在，則增加商品數(shù)量，否則添加新商品。

一、基礎(chǔ)知識(shí)

你對(duì)中繼器監(jiān)聽(tīng)器了解多少？如果不明白監(jiān)聽(tīng)器是什么東西，可以先閱讀一下《Axure監(jiān)聽(tīng)之中繼器監(jiān)聽(tīng)》這篇文章。最好能夠清楚為什么要用監(jiān)聽(tīng)器、什么時(shí)候用、以及怎么用。

！??！這個(gè)知識(shí)點(diǎn)是中繼器進(jìn)階應(yīng)用的基礎(chǔ)，很多以往非常難以實(shí)現(xiàn)的交互通過(guò)監(jiān)聽(tīng)器都可輕松實(shí)現(xiàn)。

二、簡(jiǎn)單教程

做一個(gè)簡(jiǎn)單一點(diǎn)的，只判斷有無(wú)，請(qǐng)準(zhǔn)備以下幾個(gè)元件：

一個(gè)文本框，用來(lái)輸入值。

一個(gè)文本標(biāo)簽，用來(lái)顯示反饋信息。

本教程為了直觀，一物多用，兼記錄中繼器是否包含文本框的值（可改為全局變量）。

一個(gè)按鈕（起名：添加），用來(lái)進(jìn)行添加操作。

一個(gè)中繼器（起名：購(gòu)物車(chē)），內(nèi)部放兩個(gè)元件：

• 把默認(rèn)的列名[[Item.Column0]]改為[[Item.Name]]
• 默認(rèn)的矩形，用來(lái)顯示中繼器的內(nèi)容。
• 一個(gè)隱藏的熱區(qū)，用來(lái)做監(jiān)聽(tīng)器（起名：監(jiān)聽(tīng)器）。

先綁定監(jiān)聽(tīng)的交互，添加(熱區(qū))監(jiān)聽(tīng)器的“旋轉(zhuǎn)時(shí)”，判斷如果內(nèi)部[[Item.Name]]列的值等于文件框的值，就把文本標(biāo)簽的值修改成true。

再在“添加按鈕”上新建“單擊時(shí)”交互，內(nèi)容是判斷文件框是否有內(nèi)容，如果有內(nèi)容就先把標(biāo)簽的值改為false，然后觸發(fā)監(jiān)聽(tīng)器熱區(qū)的“旋轉(zhuǎn)時(shí)”，最后觸發(fā)當(dāng)前組件的“旋轉(zhuǎn)時(shí)”進(jìn)行下一步操作。

繼續(xù)添加“旋轉(zhuǎn)時(shí)”的交互為先判斷文件標(biāo)簽的內(nèi)容是false才添加，否則就在文本標(biāo)簽里給出提示信息。

上面出現(xiàn)的局部變量[[textField]]就是文本框元件的文本。

完事兒啦，就這么簡(jiǎn)單。趕快預(yù)覽看下吧！

三、進(jìn)階教程

如果我們是要做一個(gè)功能相對(duì)完善的購(gòu)物車(chē)原型，那上面講的就過(guò)于簡(jiǎn)單了。通常，我們除了購(gòu)物車(chē)中繼器外，還應(yīng)該有一個(gè)商品列表中繼器。而且同一個(gè)商品可能會(huì)添加多次，但是基本原理是相通的，都是要通過(guò)監(jiān)聽(tīng)先判斷要添加的值在中繼器里是否已存在，無(wú)非就是商品已存在時(shí)時(shí)行數(shù)量增加，商品在購(gòu)物車(chē)?yán)锊淮嬖跁r(shí)再進(jìn)行添加。兩個(gè)中繼器間通過(guò)一個(gè)外部的文本框進(jìn)行交流。

準(zhǔn)備以下元件：

一個(gè)文本框。

一個(gè)文本標(biāo)簽。

一個(gè)商品列表中繼器（起名：商品列表）

• 把默認(rèn)的列名[[Item.Column0]]改為[[Item.Name]]
• 默認(rèn)的矩形，用來(lái)顯示中繼器的內(nèi)容。
• 一個(gè)文本框（起名：數(shù)量），類型改為“Number”，用來(lái)記錄需加入購(gòu)物車(chē)的商品數(shù)量。
• 一個(gè)添加按鈕（起名：“添加”）。

一個(gè)購(gòu)物車(chē)中繼器（起名：購(gòu)物車(chē)）

• 把默認(rèn)的列名[[Item.Column0]]改為[[Item.Name]]
• “購(gòu)物車(chē)”中繼器加一個(gè)[[Item.Quantity]]列，代表商品數(shù)量。
• 默認(rèn)的矩形，用來(lái)顯示商品名稱和數(shù)量。
• 一個(gè)隱藏的熱區(qū)，用來(lái)做監(jiān)聽(tīng)器（起名：監(jiān)聽(tīng)器）。

還是先把監(jiān)聽(tīng)上綁在熱區(qū)的“旋轉(zhuǎn)時(shí)”交互上，判斷[[Item.Name]]列值如果與文本框內(nèi)的文本相同，就把文本標(biāo)簽改為true。

“添加按鈕”的交互有一點(diǎn)點(diǎn)小變動(dòng)，直接設(shè)置文本再觸發(fā)監(jiān)聽(tīng)器：

如果購(gòu)物車(chē)?yán)餂](méi)有當(dāng)前商品，添加行，記得把“數(shù)量”元件里的數(shù)值一起保存。

如果購(gòu)物車(chē)存在當(dāng)前商品，那么更新商品數(shù)量：

這樣，進(jìn)階的購(gòu)物車(chē)也完成了，看下效果：

一個(gè)完整的購(gòu)物車(chē)功能可能還包含單價(jià)、總價(jià)、運(yùn)費(fèi)、稅費(fèi)、折扣等等屬性，有時(shí)間再補(bǔ)充。

總結(jié)

判斷目標(biāo)中繼器是否包含特定值，可以使用監(jiān)聽(tīng)器在不刷新中繼器的前提下分別判斷每一行的值。