rv-each-防止删除数据更改

Question

我如何修改rv-reach绑定，以便将新的和更改的数组项添加到dom，但删除的数组项未从dom中删除？

新数组项目>将项目添加到dom

更改数组项>更改dom中的项

删除数组项>不执行任何操作

Answer 1

您只需将其保留在阵列中即可将其从dom中删除。

您真正想要实现的是所谓的“软删除”，您必须添加一个属性： 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>

因此，每当更改任何数据时，它在dom中也将发生变化，当您删除项目时，它只是将已删除项目的属性设置为1因此您可以通过这种方式将其保留在dom中。 而且，当您添加一个项目时，只需将其推入数组即可将其添加到dom中。