-
FEATURED COMPONENTS
First time here? Check out the FAQ!
In my code, I have a textbox in which you can insert text and a button to 'publish' that text. Beneath there is a grid, in which all the previously published posts appear. The issue is that, using the @NotifyChange doesn't work, or I dont know how it works well enough to make it update the grid. Here is the .zul:
<zk>
<borderlayout id="main" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pojos.PostController')">
<!--Skipping code-->
<center style="padding:15px;" border="none">
<window>
<window title="Crear Publicacion " border="normal">
<textbox id="publish" placeholder="Make a post"
height="40px" width="67%" multiline="true">
<attribute name="onChanging">
<![CDATA[
String value = event.value;
publSize.setValue("" + value.length() + "/300");
]]>
</attribute>
</textbox>
<space width="1%"/>
<textbox id="publSize" height="40px" width="6%" style="text-align:center" disabled="true" placeholder="0/300"/>
<space width="1%"/>
<button id="publicaBttn" label="Publicar" height="40px" width="25%" onClick="@command('addNewPost', p=publish)"/>
</window>
<separator bar="false"/>
<grid id="postGrid" height="550px" model="@init(vm.posts)" emptyMessage="Nothing in Posts.">
<template name="model">
<row>
<window border="normal">
<caption id="userName" label="@load(each.username)"/>
<textbox id="infoPost" readonly="true" value="@load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="@command('addLike', index=each.index)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="3%" style="text-align:center" value="@load(each.likes)"/>
</div>
<div style="padding-right">
</div>
</hlayout>
</window>
</row></template></grid></window></center><!--...--></borderlayout></zk>
Here is the java controller:
@Command("addNewPost")
@NotifyChange("hConn")
public void addPost(@BindingParam("p") Textbox tbx) {
String text = tbx.getValue();
if (text == "") {
Messagebox.show("¡No se puede crear una publicacion sin texto!", null, 0, Messagebox.ERROR);
}
if (text.length() > 300) {
Messagebox.show("¡La publicaciones deben de ser menores a los 300 caracteres!", null, 0, Messagebox.ERROR);
} else {
hConn.addPost(usuario,text);
}
tbx.setValue("");
}
@Command("addLike")
@NotifyChange("hConn")
public void addLike(@BindingParam("index") String index) {
hConn.addLike(Integer.parseInt(index));
}
When I either add a like or make i new post, the grid doesnt update to show the new like or the new post added. How can i solve this?
The first problem is you specify model="@init(vm.posts)
which tells ZK load vm.posts
just once and no reload in the future. So @NotifyChange doesn't take effect. replace it with @load(vm.posts)
.
please refer to http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/initialization.html
Another problem is you specify vm.posts
on the Grid, but you notify hConn
. I don't see any relationship between these 2 objects. Normally, if you specify vm.posts
, you should notify the same property, e.g. @NotifyChange("posts")
.
If you assign a ListModelList
to a Grid's model, when you call any API to modify the ListModelList
, it will notify the Grid automatically. No need to add @NotifyChange
. So if you call ListModelList.add(newText)
then Grid will render the new text.
Asked: 2019-04-12 07:58:48 +0800
Seen: 16 times
Last updated: Apr 17 '19