How do i bind data to a child View Model? - data-binding

Question

I have a page with two different View Models:
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
And the include is:
<window>
<label id="sid" value="#load(pid)" />
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
The problem is that once I define the second viewModel, all the external references are inaccessible: I have a value for the first label, but I have no values for the listbox or the second label. Is there a way to do that? I tried with no success to do this:
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')" list="#ref(p.someList)">
<listbox model="#id('vars') #load(list)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
I could merge the second View Model in the first one, but that wouldn't be very convenient! I am also open to other solutions which allow me to have a modular approach.
My version of ZK is 6.0.1

Answer 1

The reason you are unable to access the external components is your composer i.e BindComposer you have same composer for the Main zul as well as for the Included zul. You need to access the Included Listbox from external ZUL.
So remove the Composer of Include ZUL, give an ID to window you have two Space Owners access the inner Listbox
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include id="include" src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
<window id="win">
<label id="sid" value="#load(pid)" />
<div
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox id="listbox2" model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
Now while accessing in your BindComposer declare variable as public :
Listbox include$win$listbox2;
in your doAfterCompose() add this line
Sysout("You can access your inner Listbox and it is:"+include$win$listbox2);
Now you see you will not get your Listbox NULL!!
Link : http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space

Answer 2

It is (was) actually a bug in ZK, which has been fixed for a future version.