Question

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

新数组项＆gt;将项目添加到dom

更改了数组项＆gt;更改dom中的项目

删除了数组项＆gt;什么都不做

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

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

1 个答案: