Data binding zkoss MVVM对模型的更改强制重新加载网格

Data binding zkoss MVVM对模型的更改强制重新加载网格,data-binding,mvvm,grid,zk,Data Binding,Mvvm,Grid,Zk,我正在使用ZKOSS MVVM。 所以在视图中,我使用一个列表框,它被绑定(@load)到ViewModel中的一个列表模型对象 如果我更改模型,我从文档中了解到的内容 1:从索引0处的视图模型向列表模型添加对象 I should see the latest object be appended at top of the Listbox. 2:从模型中删除项目 I should see that particular row from Listbox be removed. 注意:这是一

我正在使用ZKOSS MVVM。 所以在视图中,我使用一个列表框,它被绑定(@load)到ViewModel中的一个列表模型对象

如果我更改模型,我从文档中了解到的内容

1:从索引0处的视图模型向列表模型添加对象

I should see the latest object be appended at top of the Listbox.
2:从模型中删除项目

I should see that particular row from Listbox be removed.
注意:这是一个类似于社交网络的界面,例如Facebook墙,当有人创建一篇文章时,新的文章会附加到文章列表中。如果删除了一篇文章,则只从列表中删除该文章

确实会发生这种情况(新项被追加/删除项被删除),但整个列表框会重新加载,而不仅仅是添加或删除的特定行

为什么呢?为什么列表框在列表模型更改时完全重新加载

有什么想法吗

以下是代码片段(用例:添加新帖子适用。创建新帖子时,每次都会重新加载整个列表框):

查看

<z:div style="height: 100%; padding: 0px; margin: 0px;" apply="org.zkoss.bind.BindComposer"
    viewModel="@id('want_vm') @init('want.WantDesktopVM')">
<z:div zclass="content">
    <g:render template="../css/list/noEffectList"></g:render>
    <z:div hflex="1" width="100%" visible="@load(want_vm.toggleInput)" style="margin-bottom: 5px; padding: 5px">
        <z:vbox>
            <z:textbox id="postInput" multiline="true" value="" width="690px" height="50px"/>
            <z:div hflex="1" width="100%" style="text-align: right; padding-right: 5px">
                <z:button label="Post" zclass="button rect theme" onClick="@command('post', text=postInput.value)"/>
            </z:div>
        </z:vbox>           
    </z:div>
    <z:listbox model="@load(want_vm.posts)" emptyMessage="No new posts found." style="border:none;">
        <z:template name="model" var="iwant">
            <listitem style="margin-top: 10px"> 
                <listcell>
                    <hbox hflex="true">
                        <div zclass="dpFrame small">
                            <image height="50px" width="50px" content="@load(iwant.from) @converter('converter.UserActorDisplayPicConverter')" />
                        </div>
                        <vbox hflex="true" zclass="post"> 
                            <hbox hflex="true">
                                <label value="@load(iwant.from) @converter('converter.ActorDisplayNameConverter')" zclass="displayName"/>
                            </hbox>
                            <hbox hflex="true">
                                <label value="@load(iwant.textData)" zclass="post_data" multiline="true" maxlength="25"/>
                            </hbox>
                            <hbox>
                                <label value="@load(iwant.dateCreated) @converter('converter.SinceDateConverter')" zclass="since"/>
                            </hbox>
                        </vbox>
                    </hbox>
                </listcell> 
            </listitem>
        </z:template>
    </z:listbox>
</z:div>

视图模型

class WantDesktopVM {
UserActorManagerService userActorManagerService
ActivityManagerService activityManagerService

UserActor me
UserActor profile

String error = null
String view = 'iwant'

@Wire
Textbox postInput

private List<Activity> posts = []

@Init
public void init(@ContextParam(ContextType.COMPONENT) Component component,
@ContextParam(ContextType.VIEW) Component view) {
    profile = Executions.current.getAttribute("profile")
    me = Executions.current.getAttribute("me")
    loadPosts()
}

@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);
}

public boolean isMyProfile() {
    return me.id == profile.id
} 

public UserActor getMe() {
    return this.me
}

public boolean isToggleInput() {
    return this.view == 'iwant' && isMyProfile()
}

public List<Activity> getPosts() {
    println "Getting posts ...${posts.size()}"
    return this.posts
}

private List<Activity> loadPosts() {
    if(view == 'iwant') {
        posts = Activity.createCriteria().list() {
            eq 'from', profile
            eq 'type', ACTIVITY_TYPE.WANT
            order("lastUpdated", "desc")
        }
    } else {
        posts = ActorActivitySpace.createCriteria().list() {
            projections {property("activity")}
            eq 'actor', profile
            activity {
                ne 'from', profile
                eq 'type', ACTIVITY_TYPE.WANT
            }
            order("lastUpdated", "desc")
        }
    }
    return posts
}

@NotifyChange(['posts', 'toggleInput'])
@Command
public void render(@BindingParam('view') String view) {
    println "Changing view ..."
    this.view = view
    loadPosts()
}

@NotifyChange('posts')
@Command
public void post(@BindingParam('text') String text) {
    println "Posting text: $text"
    postInput.setValue("")
    if(text) {
        Activity want = activityManagerService.want(me.id, text)
        println"Want ID : $want.id"
        posts.addAll(0, [want])
    }
}
类WantDesktopVM{
UserActorManager服务UserActorManager服务
ActivityManager服务ActivityManager服务
用户演员我
用户参与者配置文件
字符串错误=null
字符串视图='iwant'
@电线
文本框后输入
私人名单职位=[]
@初始化
public void init(@ContextParam(ContextType.COMPONENT)COMPONENT,
@ContextParam(ContextType.VIEW)组件视图){
profile=Executions.current.getAttribute(“profile”)
me=Executions.current.getAttribute(“me”)
装货柱()
}
@后合成
public void afterCompose(@ContextParam(ContextType.VIEW)组件视图){
选择器。wireComponents(视图、此、假);
}
公共布尔isMyProfile(){
return me.id==profile.id
} 
公共UserActor getMe(){
把这个还给我
}
公共布尔值isToggleInput(){
返回this.view==“iwant”&&isMyProfile()
}
公共列表getPosts(){
println“获取帖子…${posts.size()}”
把这个还给我
}
专用列表loadPosts(){
如果(视图=='iwant'){
posts=Activity.createCriteria().list(){
均衡器“从”,配置文件
eq“类型”,活动类型
订单(“最新更新”、“描述”)
}
}否则{
posts=ActorActivitySpace.createCriteria().list(){
投影{属性(“活动”)}
eq‘演员’简介
活动{
东北“从”,配置文件
eq“类型”,活动类型
}
订单(“最新更新”、“描述”)
}
}
返回岗位
}
@NotifyChange(['posts','toggleInput']))
@命令
公共void呈现(@BindingParam('view')字符串视图){
println“正在更改视图…”
this.view=视图
装货柱()
}
@NotifyChange('posts')
@命令
public void post(@BindingParam('text')字符串文本){
println“发布文本:$text”
postInput.setValue(“”)
如果(文本){
Activity want=activityManagerService.want(me.id,text)
println“想要ID:$Want.ID”
posts.addAll(0,[想要])
}
}

}

您可以使用
@NotifyChange('posts')
告诉ZK整个列表已经更改。网格不尝试检查列表,它只是用新列表->完全重新加载替换当前的
ListModel

如果您不想这样做,您必须使用网格使用的
ListModel
方法来更新ui。这样,网格将准确地知道哪些行已更改,并且只更新这些行

[编辑]要实现您想要的功能,请将
列表帖子
替换为
ListModelList帖子=新建ListModelList()


当活动更改时,您必须更新此列表(即调用
add()
addAll()
)以更新单个行。您不能再从数据库加载所有内容,必须将数据库中的更改与现有列表合并。

请始终提供代码。有不同的方法来添加/删除组件,这会导致不同的行为。我已经用代码片段更新了这篇文章。请查看
Activity.createCriteria().list()
返回的是什么类型的列表?在哪里将这个列表连接到网格?它返回一个Hibernate POJO:list的列表(ArrayList),您可以向我推荐任何特定的文档吗?你说的对我来说很有意义,但我不知道他们的文档中提到了什么?@AlamSher:你如何将视图模型连接到网格?上面的ZUL代码中没有
网格
元素。请立即查看。我已经用正确的场景和代码更新了问题。我尝试了太多的东西,所以在发布时我忘记了我已经更改了代码。现在从SVN中检索到:)@Aarondigula我同意你的看法,
@NotifyChange('posts')
是个问题,但是你的解决方案让读者认为
ListModel
接口提供了一个
add()
方法,这是可行的。你提到的那些方法是
listmodelsist
的一部分,我同意,这是解决问题的最简单方法。使用ListModelList的add()和addAll(),当然避免使用@NotifyChange('posts')确实解决了这个问题。我希望这也适用于remove()。谢谢