使用 NotifyChange 更新网格

Question

在我的代码中，我有一个文本框，您可以在其中插入文本和一个 'publish' 该文本的按钮。下面是一个网格，其中显示了所有以前发布的 post。问题是，使用 @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");
}

当我添加一个赞或创建新的 post 时，网格不会更新以显示新的赞或新添加的 post。我该如何解决？

Answer 1

@init 方法在初始化视图模型时被调用。如果您想要更新，您需要将 model="@init(vm.posts)" 更改为 model="@load(vm.posts)"。（我假设 getPosts() 在你的视图模型中 returns 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 的值。

使用 NotifyChange 更新网格

Update grid using NotifyChange

grid

zk