rv-each - предотвратить удаление при изменении данных

Question

Как мне изменить привязку rv-reach, чтобы новые и измененные элементы массива были добавлены в dom, но удалены элементы массива, не удаленные из dom?

новый элемент массива> добавить элемент в DOM

измененный элемент массива> пункт изменения в йот

удален элемент массива> ничего не делать

Answer 1

Вы просто должны держать его в массиве не удалите его из дома.

Что вы на самом деле хотите достичь, так называемое «мягкое удаление» для этого, вы должны добавить свойство: removed к элементу, который по умолчанию установлен на 0, а затем на основе этого значения вы можете либо скрыть элемент, дать ему красный цвет и т. д., пока он все равно будет отображаться в dom.

Так что это, как я хотел бы сделать это, чтобы дать вам пример того, как это будет работать:

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

затем, если вы хотите добавить пункты:

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

, если вы хотите удалить элементы, например:

в конце концов, добавить некоторые классы, когда элемент удаляется:

rv-class-danger="item.data.removed | eq 1" // добавляет класс опасности

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

Таким образом, когда вы изменяете какие-либо данные, то Виль изменения в йоте также, когда вы удалите элемент, он просто устанавливает свойство удаляется из элемента в 1, так что вы можете сохранить его в этом доме. И когда вы добавляете элемент, вам просто нужно вставить его в массив, и он будет добавлен в dom.