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

Question

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

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

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

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

Answer 1

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

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

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

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>

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