Update grid using NotifyChange - grid

Question

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:
<!--Skipping code-->
<center style="padding:15px;" border="none">
<window>
<window title="Make post" 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("There must be text in a post.", null, 0, Messagebox.ERROR);
}
if (text.length() > 300) {
Messagebox.show("Posts must be under 300 characters.", null, 0, Messagebox.ERROR);
} else {
hConn.addPost(usuario,text);
}
BindUtils.postNotifyChange(null,null,this,"postGrid");
tbx.setValue("");
}
#Command("addLike")
#NotifyChange("hConn")
public void addLike(#BindingParam("index") String index) {
hConn.addLike(Integer.parseInt(index));
BindUtils.postNotifyChange(null,null,this,"postGrid");
}
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?

Answer 1

#init method is called when the view model is initialised. If you want updates you need to change model="#init(vm.posts)" to model="#load(vm.posts)". (I assume getPosts() in your view model returns hConn.
Some other observations:
You could use a custom constraint for your textbox. Something like (untested):
<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" constraint="#load(vm.max300Constraint)" />
and in your view model:
public Constraint getMax300Constraint() {
return new Constaint() {
public void validate(Component comp, Object value) throws WrongValueException {
// check if text is greater than 300 characters
}
}
}
Another option is as follows:
<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" onChanging="#command('checkLength', text=event.value)" />
and in your view model:
#Command
public void checkLength(#BindingParam("text") String text) {
// check text length
}
Both of these options also mean you can avoid putting the textbox component in your view model thereby embracing the values of MVVM.