Hide/Show components based on listbox selection, using MVVM

answered 2021-04-26 14:48:34 +0800

hawk
3250 ● 1 ● 5
http://hawkphoenix.blogsp...

Demonstrate the idea with a simple example:

<div viewModel="@id('vm')@init('org.zkoss.mvvm.viewmodel.HideVM')">
    <listbox model="@init(vm.model)" onSelect="@command('update')"/>
    <textbox placeholder="group1" visible="@load(vm.group1Visible)"/>
    <textbox placeholder="group2" visible="@load(vm.group2Visible)"/>
</div>



public class HideVM {
    private ListModelList<String> model = new ListModelList<>();
    private boolean group1Visible;
    private boolean group2Visible;

    public HideVM(){
        model.add("group1");
        model.add("group2");
    }

    @Command @NotifyChange({"group1Visible", "group2Visible"})
    public void update(){
        String selectedItem = model.getSelection().iterator().next();

        //determine the rule to update visibility
        if (selectedItem.contains("group1")){
            group1Visible = true;
            group2Visible = false;
        }else {
            group1Visible = false;
            group2Visible = true;
        }
    }
    //omit setter
}