中继器这个翻译是让人费解的，如果直译成“重复器”虽然不太专业但是更利于理解，或者干脆不编译，用“Repeater”就行。用过Asp.Net的人，一定对里面的Repeater很熟悉，没错，Axure的Repeater与Asp.Net的原理基本上是一样的。本文教大家使用axure中继器。
一、初识中继器
从元件库中找到中继器，按住并拖入中间的操作区，我们可以看到它已经有一列三行，分别写着1、2、3。
那么操作区中的1、2、3从哪里来的呢？聪明的同学已经看出来了，在右侧的“检视：中继器——中继器”栏有一个
按“Ctrl+Z”撤销“删除case1”操作，双击“case1”打开用例
只见上面写着 设置文字于（矩形）= “［［Item.Column0］］” 。顿生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什么？Item.Column0又是什么？为什么要用“［［ ］］”包起来？
关掉用例
点击中继器模式
点击“检视：矩形”中的名称栏，我们给这个矩形取名为“动物”。
选中中继器模式
将操作区切换回index页面，我们可以看到发生了一些变化：中继器变成了两行三列，“case1”中的“矩形”也变成了“动物”。这是我们刚才在中继器模式
接下来，我们要做更多的操作。在右侧“检视：中继器——中继器”中，双击“Column0”，更名为“FirstColumn”，双击“添加列”，取名为“SecondColumn”。让我们看看“case1”发生了什么变化。
我们将“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也变为“FirstColumn”，由此我们可以意会他们的关系。
二、每项加载时
接下来，我们在“检视：中继器——中继器”的
这是因为“case1”只同步了第一列却没有同步第二列。接下来我们试着同步第二列。双击“case1”打开用例
有样学样，我们把“食物（矩形）”和“SecondColumn”也联系起来。先勾选“食物（矩形）”，再将右下角的值由默认的“［［Item.FirstColumn］］”改为“［［Item.SecondColumn］］”。聪明的同学应该可以意识到，这个“［［Item.xxxxxx］］”是一种默认格式，代表
点击确定按钮，关闭用例
三、动态添加
首先，我们添加两个文本框分别用于输入“动物”和“食物”，再添加个用于提交数据的提交按钮。
什么？提交数据？
将两个文本框和提交按钮分布在右侧检视的名称栏改名为“输入动物”、“输入食物”和“提交按钮”。
点击提交按钮，在右侧“检视：提交按钮——交互”中双击“鼠标单击时”，打开用例
右侧配置动作栏下面点击添加行打开添加行到中继器。
点击“FirstColumn”下方，“添加行”右侧的“fx”，打开
将“局部变量”中的“LVAR1”改为“Animal”，右侧“输入食物”改为输入动物。在上方“插入变量或函数”下方的输入框输入“［［Animal］］”（对应上面的“Animal”，意为“Animal”变量的值）。
点击确定按钮关闭当前面板。同样操作第二列：点击“SecondColumn”下方，“添加行”右侧的“fx”，打开
同样点击确定按钮关闭当前面板。现在添加行到中继器面板变成这个样子，意思是单击提交按钮时，把“输入动物”文本框的值放在Animal中，把“输入食物”文本框的值放在Food中，然后将Animal和Food的值分别作为第一列和第二列组成一行，将这一行添加到中继器中。
点击确定按钮关闭添加行到中继器面板。点击确定按钮关闭用例
点击右上角预览按钮打开浏览器，在两个输入框中分别输入动物和食物，点击提交按钮，即可看到动态添加的效果。
四、动态删除
那要删除怎么做呢？也很简单。我们关掉浏览器，回到主界面，添加一个用于删除的按钮。
点击右侧“检视：矩形——交互”中的“鼠标单击时”打开用例
点击确认按钮回到主界面。切换到“（中继器）index”中继器模式
再在右侧“检视：组合——交互”中双击“鼠标单击时”打开用例
我们还要让我们点击的某一行置为“已标记”状态，方便我们上文中说到的用于删除的按钮删除“已标记的行”。在左侧添加动作栏“中继器——数据集”中点击“标记行”，再勾选右侧配置动作栏中的“（中继器）”一项。
评论 (0)