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