Обновить сетку с помощью NotifyChange - PullRequest
Новая
       16

Обновить сетку с помощью NotifyChange

0 голосов
/ 13 апреля 2019

В моем коде у меня есть текстовое поле, в которое вы можете вставить текст и кнопку, чтобы «опубликовать» этот текст.Внизу есть сетка, в которой отображаются все ранее опубликованные посты.Проблема в том, что использование @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");
}

Когда я добавляю лайк или создаю новое сообщение, сеткане обновляется, чтобы показать новый лайк или новый пост.Как я могу решить это?

1 Ответ

0 голосов
/ 13 апреля 2019

@ init метод вызывается при инициализации модели представления. Если вы хотите обновления, вам нужно изменить model="@init(vm.posts)" на model="@load(vm.posts)". (Я полагаю, getPosts() в вашем представлении модель возвращает hConn.

Некоторые другие наблюдения: Вы можете использовать пользовательское ограничение для вашего текстового поля. Что-то вроде (не проверено): 

<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.

...