中繼器這個翻譯是讓人費解的，如果直譯成“重復器”雖然不太專業但是更利于理解，或者干脆不編譯，用“Repeater”就行。用過Asp.Net的人，一定對里面的Repeater很熟悉，沒錯，Axure的Repeater與Asp.Net的原理基本上是一樣的。本文教大家使用axure中繼器。

一、初識中繼器

從元件庫中找到中繼器，按住并拖入中間的操作區，我們可以看到它已經有一列三行，分別寫著1、2、3。

那么操作區中的1、2、3從哪里來的呢？聰明的同學已經看出來了，在右側的“檢視：中繼器——中繼器”欄有一個編輯區，里邊便有1、2、3。但是這還不夠，如果我們把“檢視：中繼器——交互——每項加載時”中的“case1”刪除，那么操作區中1、2、3便消失了。由此可見，還需要“case1”把操作區和編輯區聯系在一起。

按“Ctrl+Z”撤銷“刪除case1”操作，雙擊“case1”打開用例編輯《每項加載時》面板，我們來看看“case1”究竟做了什么。

只見上面寫著 設置文字于（矩形）= “［［Item.Column0］］” 。頓生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什么？Item.Column0又是什么？為什么要用“［［ ］］”包起來？

關掉用例編輯《每項加載時》面板，回到主界面，雙擊操作區的中繼器，打開中繼器模式編輯操作區。

點擊中繼器模式編輯操作區中的矩形，可以看到右側“檢視：矩形”中名稱欄顯示“（矩形名稱）”，這就是上文中的“（矩形）”。

點擊“檢視：矩形”中的名稱欄，我們給這個矩形取名為“動物”。

選中中繼器模式編輯操作區中的矩形，按“Ctrl+C”和“Ctrl+V”復制粘貼出新的矩形，拖動矩形放置在原矩形的右側，并在右側“檢視：矩形”中名稱欄將矩形名稱改為“食物”。

將操作區切換回index頁面，我們可以看到發生了一些變化：中繼器變成了兩行三列，“case1”中的“矩形”也變成了“動物”。這是我們剛才在中繼器模式編輯操作區修改的結果。

接下來，我們要做更多的操作。在右側“檢視：中繼器——中繼器”中，雙擊“Column0”，更名為“FirstColumn”，雙擊“添加列”，取名為“SecondColumn”。讓我們看看“case1”發生了什么變化。

我們將“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也變為“FirstColumn”，由此我們可以意會他們的關系。

二、每項加載時

接下來，我們在“檢視：中繼器——中繼器”的編輯區中填入一些動物和食物的對應關系，可以看到，操作區也發生了改變，但是只顯示了第一列，第二列卻沒有顯示。

這是因為“case1”只同步了第一列卻沒有同步第二列。接下來我們試著同步第二列。雙擊“case1”打開用例編輯《每項加載時》面板，可以看到，“case1”只將“動物（矩形）”和“FirstColumn”聯系起來。

有樣學樣，我們把“食物（矩形）”和“SecondColumn”也聯系起來。先勾選“食物（矩形）”，再將右下角的值由默認的“［［Item.FirstColumn］］”改為“［［Item.SecondColumn］］”。聰明的同學應該可以意識到，這個“［［Item.xxxxxx］］”是一種默認格式，代表編輯區中xxxxxx列的值。很正確，Item就代表這個中繼器的編輯區，“［［ ］］”則代表取值，取中繼器編輯區xxxxxx列的值。

點擊確定按鈕，關閉用例編輯《每項加載時》面板，回到操作區，我們看到操作區中的中繼器的第二列成功地與編輯區中的第二列同步。

三、動態添加

首先，我們添加兩個文本框分別用于輸入“動物”和“食物”，再添加個用于提交數據的提交按鈕。

什么？提交數據？

將兩個文本框和提交按鈕分布在右側檢視的名稱欄改名為“輸入動物”、“輸入食物”和“提交按鈕”。

點擊提交按鈕，在右側“檢視：提交按鈕——交互”中雙擊“鼠標單擊時”，打開用例編輯《鼠標單擊時》面板。在左側添加動作欄雙擊“中繼器——數據集”中的“添加行”。在右側配置動作欄勾選“（中繼器）”（因為我們還沒給我們的中繼器取名，所以顯示為“（中繼器）”，跟前面提到的“（矩形）”一個道理）。

右側配置動作欄下面點擊添加行打開添加行到中繼器。

點擊“FirstColumn”下方，“添加行”右側的“fx”，打開編輯值面板。點擊“局部變量”中的“添加局部變量”。

將“局部變量”中的“LVAR1”改為“Animal”，右側“輸入食物”改為輸入動物。在上方“插入變量或函數”下方的輸入框輸入“［［Animal］］”（對應上面的“Animal”，意為“Animal”變量的值）。

點擊確定按鈕關閉當前面板。同樣操作第二列：點擊“SecondColumn”下方，“添加行”右側的“fx”，打開編輯值面板進行編輯。

同樣點擊確定按鈕關閉當前面板。現在添加行到中繼器面板變成這個樣子，意思是單擊提交按鈕時，把“輸入動物”文本框的值放在Animal中，把“輸入食物”文本框的值放在Food中，然后將Animal和Food的值分別作為第一列和第二列組成一行，將這一行添加到中繼器中。

點擊確定按鈕關閉添加行到中繼器面板。點擊確定按鈕關閉用例編輯《鼠標單擊時》面板。回到主界面。

點擊右上角預覽按鈕打開瀏覽器，在兩個輸入框中分別輸入動物和食物，點擊提交按鈕，即可看到動態添加的效果。

四、動態刪除

那要刪除怎么做呢？也很簡單。我們關掉瀏覽器，回到主界面，添加一個用于刪除的按鈕。

點擊右側“檢視：矩形——交互”中的“鼠標單擊時”打開用例編輯《鼠標單擊時》面板，在左側添加動作欄點擊“中繼器——數據集”中的“刪除行”，右側配置動作欄勾選“（中繼器）”，下方的單選框選擇“已標記”。意思是單擊按鈕時，刪除中繼器中已標記的行。什么？已標記？怎么標記？

點擊確認按鈕回到主界面。切換到“（中繼器）index”中繼器模式編輯操作區，按住“Ctrl”鍵點擊兩個矩形，右鍵，選擇“組合”。在右側“檢視：組合——Shapes——交互樣式設置”中點擊“選中”打開交互樣式設置面板，找到填充顏色一項，勾選并將顏色改為你喜歡的顏色。按確定鍵關閉交互樣式設置面板。

再在右側“檢視：組合——交互”中雙擊“鼠標單擊時”打開用例編輯《鼠標單擊》面板，在左側添加動作欄“元件——設置選中”中點擊“切換選中狀態”，再勾選右側配置動作欄中的“當前元件”一項。這兩步操作的目的在于讓我們點擊某一行時這一行會變色來反饋我們選了該行。

我們還要讓我們點擊的某一行置為“已標記”狀態，方便我們上文中說到的用于刪除的按鈕刪除“已標記的行”。在左側添加動作欄“中繼器——數據集”中點擊“標記行”，再勾選右側配置動作欄中的“（中繼器）”一項。