0

我正在尝试创建两个执行完全相同功能的网格，而不必将网格的代码复制两次。所以，我决定使用宏组件。但是，我不确定如何在宏组件中动态创建组件的 ID。该代码执行以下操作：

第一个网格（西部区域）有两行和两个文本框。如果我将“hello”添加到此网格中的第一个文本框，则第二个文本框的值也设置为“hello”。

第二个网格（中心区域）有两行和两个文本框。如果我将“world”添加到此网格中的第一个文本框，则第二个文本框的值也设置为“world”

  • 第一个网格中两个文本框的值现在相同，即“hello”
  • 第二个网格中两个文本框的值现在相同，即“世界”

我创建了一个 zul 文件，其中我使用了一个宏组件，如下所示： 

<?component name="mygrid1" macro-uri="grid1.zul" inline="true"?>
<zk>
<vbox hflex="1">
  <borderlayout height="500px" width="500px">
    <west size="50%">
      <mygrid1 id="grid1" index="1" />
    </west>
    <center>
      <mygrid1 id="grid2" index="2" />
    </center>
  </borderlayout>
</vbox>
</zk>
<zscript>
  fillInDuplicateBox(String value, Textbox duplicateBox) {
    if (!"".contentEquals(duplicateBox.value))
            return;
    duplicateBox.value = value;
  }
</zscript>
</window>

宏组件如下图所示：

<zk>
<vbox hflex="1">
  <grid width="300px">
    <rows>
      <row> Box 1: <textbox id="${concat("newBox", arg.index)}" onChange="fillInDuplicateBox(${concat("newBox, arg.index)}.value, ${concat("duplicateBox", arg.index)})" hflex="1" /></row>
      <row> Box 2: <textbox id="${concat("duplicateBox", arg.index)}" hflex="1" /></row>
    </rows>
  </grid>                   
</vbox>
</zk>

我还尝试了以下代码来创建宏组件

<zk>
  <vbox hflex="1">
    <grid width="300px">
      <rows>
         <row> Box 1: <textbox id="newBox${arg.index}" onChange="fillInDuplicateBox(newBox${arg.index}.value, duplicateBox${arg.index})" hflex="1" /></row>
         <row> Box 2: <textbox id="duplicateBox${arg.index}" hflex="1" /></row>
      </rows>
    </grid> 
  </vbox>
</zk>

这些都不起作用。我不确定如何在宏组件中动态创建组件的 id。第一个网格的文本框 ID 必须是“newBox1”、“duplicateBox1”，第二个网格的文本框 ID 必须是“newBox2”、“duplicateBox2”

请指出是否有更好的方法来完成这项任务。

谢谢，索尼

4

1 回答 1

1

我不确定是否可以像这样动态创建 id，但我很确定最好避免它。通过完全避免 id 问题并使用数据绑定或事件处理来代替，有更好的方法来做到这一点。您的示例表明每个网格的主要目的是将一个文本框的值复制到不同的文本框-我想您正在尝试实现更大的目标，因此请告诉我们此答案是否会导致您获得所需的内容。

我已经简化并扩展了您的示例以给出两个示例，第一个示例使用 onChanging 在您键入时立即复制。第二对框使用数据绑定。

<?component name="mygrid1" macro-uri="/grid1.zul" ?>
<zk>
   <window>
      <vbox hflex="1">
         <mygrid1 id="grid1" myGridTitle="First" />
         <mygrid1 id="grid2" myGridTitle="Another" />
      </vbox>
   </window>
</zk>

这是grid1.zul中的宏组件：

<zk>
   <zscript><![CDATA[
   String myBoundString = "initial value";
]]></zscript>
   <vbox hflex="1">
      <grid>
         <rows>
            <row>
               <hbox><label value="${arg.myGridTitle}" /> Source</hbox>
               <textbox id="originalText" hflex="1" onChanging="duplicateText.value = event.value" />
            </row>
            <row>
               <hbox><label value="${arg.myGridTitle}" /> Source copies here:</hbox>
               <textbox id="duplicateText" hflex="1" />
            </row>
            <row>
               Bound to myBoundString:
               <textbox id="boundText1" value="@{myBoundString}" hflex="1" />
            </row>
            <row>
               Bound to boundText1:
               <textbox id="boundText2" value="@{boundText1.value, load-when=boundText1.onChange}" hflex="1" />
            </row>
         </rows>
      </grid>
   </vbox>
</zk>

在数据绑定示例中，您必须更改“初始值”，然后在活页夹更新 boundText2 之前使用制表符。另请注意，TextBox 确实有 id（boundText1 和 boundText2），但这对在宏组件的多个实例中实现预期功能没有影响。

于 2012-01-11T01:15:38.247 回答