5

ZKOSS MVVM を使用しています。したがって、View では Listbox を使用しており、ViewModel のリスト モデル オブジェクトにバインド (@load) されています。

モデルを変更した場合、ドキュメントから理解していること

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 ウォールなどのソーシャル ネットワークのようなインターフェイスです。投稿が削除された場合、その投稿のみがリストから削除されます

まあ、それは起こります（新しいアイテムが追加/削除されたアイテムが削除されます）が、追加または削除された特定の行だけでなく、リストボックス全体がリロードされます。

何故ですか？リスト モデルの変更時に Listbox が完全にリロードされる理由。

何か案が？

コード スニペットは次のとおりです (ユース ケース: 新しい投稿の追加が適用されます。新しい投稿を作成すると、リストボックス全体が毎回リロードされます):

意見

<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])
    }
}

}

4

1 に答える 1

5

@NotifyChange('posts')リスト全体が変更されたことをZKに伝えるために使用します。グリッドはリストを調べようとせず、現在のListModelリストを新しいリストに置き換えるだけです -> フルリロード。

それを望まない場合はListModel、グリッドで使用されるメソッドを使用して UI を更新する必要があります。そうすれば、グリッドはどの行が変更されたかを正確に認識し、それらのみを更新します。

[編集]あなたが望むものを達成するにはList<Activity> posts、ListModelList<Activity> posts = new ListModelList<Activity>()

アクティビティが変更された場合は、このリストを更新add()して (つまり、またはを呼び出しaddAll()て)、個々の行を更新する必要があります。データベースからすべてをロードすることはできなくなりました。データベース内の変更を既存のリストとマージする必要があります。

于 2012-12-20T08:47:36.087 に答える