rv-each - データ変更時の削除を防止する

Question

rv-reachバインディングを変更して、新しいおよび変更された配列項目がdomに追加されるが、domから削除されない配列項目を削除する方法を教えてください。

新しい配列項目>はあなたが単にないように配列して、それを維持する必要があり、DOM

削除配列項目>何もしない

Answer 1

に

変更された配列項目>変更項目をDOMに項目を追加しますそれをDOMから取り除く。

実際に達成したいのは、これを達成するためのいわゆる「ソフト削除」です。removedを項目に追加する必要があります。この項目はデフォルトで0に設定され、その値に基づいてアイテムを非表示にして、赤色などにします。それでもdomに表示されます。削除したい場合は

items.push(new item({name:'my newest item'}); // new item gets added to the 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}); 

：

は、これは私はあなたにそれが動作する方法の例を与えるためにこれを行うだろう方法です

最終的にいくつかのクラスを追加します：

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に追加されます。