2011-10-25 28 views
0

宏組件的動態創建一個ID我想創建兩個網格,其無需複製網格代碼的代碼執行兩次完全相同的功能。所以,我決定使用一個宏組件。但是,我不確定如何動態地在宏組件中創建組件的ID。該代碼執行以下操作:使用參數

第一格柵(西部區域)具有兩排,兩個文本框。如果我將「hello」添加到此網格中的第一個文本框,那麼第二個文本框的值也設置爲「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。第一個網格的文本框標識必須是「newBox1」,「duplicateBox1」,第二個網格的文本框標識必須是「newBox2」,「duplicateBox2」

請指出是否有更好的方法來完成此任務。

感謝, 索尼

回答

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之前。還要注意的是,文本框做有ID(boundText1和boundText2),但對實現宏組件的多個實例預期的功能沒有任何影響。