0

グリッドのコードのコードを 2 回複製することなく、まったく同じ機能を実行する 2 つのグリッドを作成しようとしています。そこで、マクロコンポーネントを使用することにしました。しかし、マクロ コンポーネントでコンポーネントの ID を動的に作成する方法がわかりません。コードは次のことを行います。

最初のグリッド (西の領域) には、2 つのテキスト ボックスを持つ 2 つの行があります。このグリッドの最初のテキスト ボックスに「hello」を追加すると、2 番目のテキスト ボックスの値も「hello」に設定されます。

2 番目のグリッド (中央の領域) には、2 つのテキスト ボックスを持つ 2 つの行があります。このグリッドの最初のテキスト ボックスに「world」を追加すると、2 番目のテキスト ボックスの値も「world」に設定されます。

  • 最初のグリッドの両方のテキスト ボックスの値が同じになりました。つまり、「hello」です。
  • 2 番目のグリッドの両方のテキスト ボックスの値は同じになりました。つまり、"world" です。

次のようなマクロ コンポーネントを使用する 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」である必要があり、2 番目のグリッドのテキストボックス ID は「newBox2」、「duplicateBox2」である必要があります。

このタスクを達成するためのより良い方法があるかどうかを指摘してください。

ありがとう、ソニー

4

1 に答える 1

1

そのような ID を動的に作成できるかどうかはわかりませんが、避けた方がよいことは確かです。id の問題を完全に回避し、代わりにデータ バインディングまたはイベント処理を使用することで、これを行うためのより良い方法があります。あなたの例は、各グリッドの主な目的が、ある Textbox の値を別の Textbox にコピーすることであることを示しています.

サンプルを単純化して拡張し、2 つの例を示しました。最初の例では、入力時に onChanging を使用してすぐにコピーします。2 番目のボックスのペアは、データバインディングを使用します。

<?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を更新する前に、「初期値」を変更してからタブを離す必要があります。また、TextBoxes には ID (boundText1 と boundText2) がありますが、マクロ コンポーネントの複数のインスタンスで期待される機能を実現することには影響しません。

于 2012-01-11T01:15:38.247 に答える