rv-each - verhindert Entfernen bei Datenänderung

Question

Wie kann ich die rv-reach-Bindung ändern, so dass neue und geänderte Array-Elemente zum Dom hinzugefügt werden, aber Array-Elemente entfernt, die nicht aus dem Dom entfernt wurden?

neues Array item> Element in dem dom

geänderte Array item> Änderungspunkt in dem dom

entfernt Array item> nichts tun

Answer 1

Sie einfach haben es in der Anordnung zu halten, um nicht Entferne es aus dem Dom.

Was wollen Sie eigentlich erreichen, ist ein so „soft löschen“ genannt, das zu erreichen, müssen Sie eine Eigenschaft hinzu: removed auf das Element, das standardmäßig auf 0 gesetzt wird, dann basierend auf diesem Wert können Sie entweder Verstecke den Gegenstand, gib ihm eine rote Farbe usw. während er noch im Dom angezeigt wird.

Also das ist, wie ich dies tun würde Ihnen ein Beispiel zu geben, wie es funktioniert:

var App = {} // this wraps everything up. 
App.items = [] // collection of items 

// example item model 
App.item = new function(data){ 
    var _self; 
    this.data = data || {}; 
    this.defaults = { 
     removed:0 
    } 

    // set default values where needed if not set 
    for (x in this.defaults) { 
     if(!this.data.hasOwnProperty(x)){ 
      this.data[x] = this.defaults[x]; 
     } 
    } 

    this.remove = function(){ 
     _self.data.removed = 1; 
     // ajax request to set current item to removed...  
     // but dont remove it from the array so it stays in the dom 
    } 
    _self = this;  
} 
rivets.bind($('#app'),{app:App}); 

dann, wenn Sie Elemente hinzufügen möchten:

items.push(new item({name:'my newest item'}); // new item gets added to the dom 

wenn Sie entfernen möchten Elemente zum Beispiel:

schließlich einige Klassen hinzufügen, wenn das Element entfernt wird:

rv-class-danger="item.data.removed | eq 1" // fügt die Klasse Gefahr

<div id="app"> 
    <div rv-each-item="app.items" rv-class-danger="item.data.removed | eq 1"> 
     {{ item.data.name }} 
     <!-- when the button is clicked, this will trigger the remove function on the item it belongs to. --> 
     <button rv-on-click="item.remove">remove</button> 
    </div> 
</div> 

Also, wenn Sie alle Daten ändern, ist es auch in der dom ändern wil, wenn Sie das Element entfernen, es Eigenschaft nur setzt auf 1 des Elements entfernt, so können Sie es halten in der Dom auf diese Weise. Und wenn Sie ein Element hinzufügen, müssen Sie es einfach in das Array schieben und es wird zum Dom hinzugefügt.