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

前言

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

一、基礎(chǔ)知識

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

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

二、簡單教程

做一個簡單一點的，只判斷有無，請準備以下幾個元件：

一個文本框，用來輸入值。

一個文本標簽，用來顯示反饋信息。

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

一個按鈕（起名：添加），用來進行添加操作。

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

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

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

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

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

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

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

三、進階教程

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

準備以下元件：

一個文本框。

一個文本標簽。

一個商品列表中繼器（起名：商品列表）

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

一個購物車中繼器（起名：購物車）

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

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

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

如果購物車里沒有當前商品，添加行，記得把“數(shù)量”元件里的數(shù)值一起保存。

如果購物車存在當前商品，那么更新商品數(shù)量：

這樣，進階的購物車也完成了，看下效果：

一個完整的購物車功能可能還包含單價、總價、運費、稅費、折扣等等屬性，有時間再補充。

總結(jié)

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