0

Apply template

asked 2021-09-23 22:39:08 +0800

aUser gravatar image aUser
133 4

updated 2021-10-04 09:29:41 +0800

cor3000 gravatar image cor3000
6168 2 7
ZK Team

Hello,

I wanted to use the apply component. I have a page like this:

<zk>
    <window border="normal" viewModel="@id('vm') @init('ViewModel')">
        <tabbox>
            <tabs>
                <tab label="first tab" selected="@load(vm.firstTabSelected)" />
                <tab label="second tab" visible="@load(vm.openPractice)" 
                     selected="@load(vm.secondTabSelected)" />
            </tabs>
            <tabpanels>
                <tabpanel>
                    <label value="first tab" />
                </tabpanel>
                <tabpanel visible="@load(vm.panelVisible)" >
                    <apply templateURI="~./anotherPage.zul" 
                           param1="@load(vm.var1)" 
                           param2="@load(vm.var2)" />
                </tabpanel>
            </tabpanels>
        </tabbox>

    </window>
</zk>

I need to put the apply component in the second panel but as soon as the parent page is loaded (that is the one posted above), the init method of the child page (anotherPage.zul) is called. I would like to invoke the init method of the child page only when the second tab panel is opened.

The workaround I'm using right now is to pass another parameter to the apply component, a boolean, that is setted to true only when the second tab is selected. This way, in the init method of "anotherPage.zul" I can check that if the boolean is false, return immediately, else proceed.

Is there a way to load the apply element based on some events though?

Thanks

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
1

answered 2021-09-27 09:54:52 +0800

cor3000 gravatar image cor3000
6168 2 7
ZK Team

One of the core ideas of MVVM is to determine the UI by the state/data in your View Model. Events should not directly update the UI. Instead Events trigger commands in the view model which then update the viewModel state. Following that principle you can place the decision when to include the zul file around or into the <apply> element itself. E.g. surround by an <if>-element with a dynamic test flag

<tabpanel visible="@load(vm.panelVisible)" >
    <if test="@load(vm.someFlag)">
        <apply templateURI="~./anotherPage.zul" .../>
    </if>
</tabpanel>

or with a dynamic templateURI

<tabpanel visible="@load(vm.panelVisible)" >
    <apply templateURI="@load(vm.someFlag ? '~./anotherPage.zul' : null)" .../>
</tabpanel>

or if you need a dynamic zul file path

<tabpanel visible="@load(vm.panelVisible)" >
    <apply templateURI="@load(vm.someTemplateURI)"/>
</tabpanel>

all you need then is to update someFlag or someTemplateURI in your viewmodel's command handler method and trigger a notify-change. Then the <apply>-element will load the content on demand, and only init the inner VM when needed.

link publish delete flag offensive edit

Comments

Thank you, solved the problem

aUser ( 2021-09-27 17:41:01 +0800 )edit
0

answered 2021-09-27 12:27:12 +0800

johnclark123 gravatar image johnclark123
1

Thanks a lot for this solution

link publish delete flag offensive edit
0

answered 2021-09-27 12:27:39 +0800

johnclark123 gravatar image johnclark123
1

updated 2021-09-27 18:32:38 +0800

cor3000 gravatar image cor3000
6168 2 7
ZK Team
<tabpanel visible="@load(vm.panelVisible)" >
    <apply templateURI="@load(vm.someTemplateURI)"/>
</tabpanel>

it is the best thing

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-09-23 22:39:08 +0800

Seen: 14 times

Last updated: Oct 04

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More