zkoss MVVM passa alla griglia di forza modello per ricaricare

Question

Sto utilizzando ZKOSS MVVM. Quindi in Visualizza sto usando una Listbox ed è associata (@load) a un oggetto modello lista in ViewModel.

Quello che ho capito dalla documentazione, se cambio il modello

1: Aggiungere un oggetto al modello di lista di Vista del modello in corrispondenza dell'indice 0

I should see the latest object be appended at top of the Listbox. 

2: Rimuovere un elemento da modello

I should see that particular row from Listbox be removed. 

Nota: è un'interfaccia come un social network ad es. Muro di Facebook quando qualcuno crea un post e un nuovo post viene aggiunto all'elenco dei post. Se un post viene cancellato solo quel post viene cancellato dall'elenco

Bene, succede (il nuovo elemento viene aggiunto/l'elemento eliminato viene rimosso) ma l'intero Listbox viene ricaricato e non solo quella particolare riga che è stata aggiunta o rimossa .

Perché è quello? Perché Listbox si ricarica completamente sulla modifica del modello di elenco.

Qualche idea?

Qui ci sono i frammenti di codice (Caso d'uso: Aggiungi nuovo post è applicabile sulla creazione di nuovi posto intere ricariche Listbox ogni volta.):

View

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

ViewModel

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

}

Answer 1

È possibile utilizzare @NotifyChange('posts') per comunicare a ZK che l'intera lista è cambiata. La griglia non tenta di esaminare l'elenco, sostituisce semplicemente il suo attuale ListModel con il nuovo elenco -> ricarica completa.

Se non si desidera ciò, sarà necessario utilizzare i metodi dello ListModel utilizzato dalla griglia per aggiornare l'interfaccia utente. In questo modo, la griglia saprà esattamente quali file sono cambiate e aggiornerà solo quelle.

[EDIT] per ottenere quello che si desidera, sostituire List<Activity> posts con ListModelList<Activity> posts = new ListModelList<Activity>()

Quando le attività cambiano, è necessario aggiornamento questa lista (cioè chiamare add() o addAll()) per aggiornare singole righe. Non è più possibile caricare tutto dal database, è necessario unione modifiche nel database con l'elenco esistente.