Zk复选框有问题吗？

Question

I have a macro Component for DualListBox which also contains the Checkbox, something Like this:

<hlayout
    style="padding-left: 40px;padding-top:20px;padding-bottom:20px;"
    hflex="1" vflex="1">
    <separator />

    <listbox id="candidateLb" vflex="true" width="250px"
        multiple="true"   model="${arg.candidateModel}">
        <listhead>
            <listheader label="Default Column List"></listheader>

        </listhead>
        <template name="model" var="each">
            <listitem>
                <listcell label="${each}" />

            </listitem>
        </template>
    </listbox>

    <vbox spacing="10px">
        <image style="cursor:pointer" id="chooseAllBtn"
            src="/images/rightrightarrow_g.png" />
        <image style="cursor:pointer" id="chooseBtn"
            src="/images/rightarrow_g.png" />
        <image style="cursor:pointer" id="removeBtn"
            src="/images/leftarrow_g.png" />
        <image style="cursor:pointer" id="removeAllBtn"
            src="/images/leftleftarrow_g.png" />
    </vbox>
    <listbox id="chosenLb" vflex="true" width="250px"
          model="${arg.chosenDataModel}" >
        <listhead>
            <listheader label="Selected Column List"></listheader>

        </listhead>
        <template name="model" var="each">
            <listitem>

                <listcell label="${each.value}" >
                <separator orient="vertical"  />

            <b >    <checkbox checked="${each.checked}" /></b>
                </listcell>
            </listitem>
        </template>
    </listbox>

    <vbox spacing="10px">
        <image style="cursor:pointer" id="topBtn"
            src="/images/upuparrow_g.png" />
        <image style="cursor:pointer" id="upBtn"
            src="/images/uparrow_g.png" />
        <image style="cursor:pointer" id="downBtn"
            src="/images/downarrow_g.png" />
        <image style="cursor:pointer" id="bottomBtn"
            src="/images/downdownarrow_g.png" />
    </vbox>

</hlayout>

My Problem is that when some one checked the CheckBox i want to call a method which will update some value. How can i do this?

Answer 1

I resolved above issue by using this code..

<listbox id="chosenLb" vflex="1" width="100%"
                        height="135px" model="@load(vm.chosenDataModel)">
                        <listhead sizable="true">
                            <listheader>
                                <x:table width="100%">
                                    <x:tr>
                                        <x:td width="90%">
                                            <label
                                                value="Selected Column List" style="font-weight: bold">
                                            </label>
                                        </x:td>
                                        <x:td width="10%">
                                            <label
                                                value="Ascending" style="font-weight: bolder">
                                            </label>
                                        </x:td>
                                    </x:tr>
                                </x:table>
                            </listheader>

                        </listhead>

                        <template name="model" var="selected">
                            <listitem>
                                <listcell>
                                    <x:table width="100%">
                                        <x:tr>
                                            <x:td width="90%">
                                                <label
                                                    value="@bind(selected.listBoxHeaderName)"
                                                    style="width:200px">
                                                </label>
                                            </x:td>
                                            <x:td width="10%">

                                                <checkbox  
                                                    checked="@bind(selected.sortAscending)"
                                                    style="align:right;width:50px"
                                                     />
                                            </x:td>
                                        </x:tr>
                                    </x:table>
                                </listcell>
                            </listitem>
                        </template>
                    </listbox>

and here is my checbox

 <checkbox   checked="@bind(selected.sortAscending)" style="align:right;width:50px"/>