Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5223

the if element doesn't keep the position of its child component

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 9.6.2
    • Fix Version/s: 10.0.0, 9.6.3
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None

      Description

      Steps to Reproduce

      <zk>
          <zscript><![CDATA[
              Map dummyVm = new HashMap();
              dummyVm.put("flag", true);
          ]]></zscript>
          <div viewModel="@id('vm') @init(dummyVm)">
              <apply template="test">
                  <template name="content">
                      <apply template="some-control"/>
      <!--                workaround, make the apply dynamic-->
      <!--                <apply template="some-control" dynamicValue="true"/>-->
                      <div>
                          2) <button label="toggle A/B" onClick='dummyVm.put("flag", !dummyVm.get("flag")); BindUtils.postNotifyChange(null, null, dummyVm, "flag");'/>
                      </div>
                      <if test="@load(vm.flag)">
                          <div>
                              3) show A
                          </div>
                      </if>
                      <if test="@load(not vm.flag)">
                          <div>
                              3) show B
                          </div>
                      </if>
                  </template>
              </apply>
          </div>
      
          <template name="some-control">
              <div>
                  1) some control
              </div>
          </template>
      
          <template name="test">
              <div>
                  header
              </div>
              <div>
                  <apply template="content"/>
              </div>
              <div>
                  footer
              </div>
          </template>
      </zk>
      

      1. click the "toggle" button

      Current Result

      injection position is not preserved, and the 3rd row moves to the top of the content

      Expected Result

      keep the injected position

      Workaround

      set dynamiceValue at the first child
      <apply template="some-control" dynamicValue="true"/>

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              DevChu DevChu
              Reporter:
              hawk hawk
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: