使用NotifyChange更新网格

Question

在我的代码中，我有一个文本框，您可以在其中插入文本和按钮来“发布”该文本。在下面有一个网格，其中显示所有以前发布的帖子。问题是，使用@NotifyChange不起作用，或者我不知道它如何运行良好，以使其更新网格。这是.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>

这是java控制器：

@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");
}

当我添加一个喜欢或新的帖子时，网格不会更新以显示新的喜欢或添加新帖子。我怎么解决这个问题？

Answer 1

初始化视图模型时调用@init方法。如果你想要更新，你需要将model="@init(vm.posts)"更改为model="@load(vm.posts)"。 （我假设你的视图模型中的getPosts()返回hConn。

其他一些观察结果：您可以使用custom constraint作为文本框。像（未经测试）的东西：

<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" constraint="@load(vm.max300Constraint)" />

并在您的视图模型中：

public Constraint getMax300Constraint() {
    return new Constaint() {
        public void validate(Component comp, Object value) throws WrongValueException {
             // check if text is greater than 300 characters
        }
    }
}

另一种选择如下：

<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" onChanging="@command('checkLength', text=event.value)" />

并在您的视图模型中：

@Command
public void checkLength(@BindingParam("text") String text) {
    // check text length 
}

这两个选项也意味着您可以避免将textbox组件放在视图模型中，从而接受MVVM的值。