CODEWITHSUNDEEP
javascriptmeteor
Hubert OG
Hubert OG

Reputation: 19544

Prevent reactivity from removing data from template

I've got a template to manage important property in my collection. It's a simple list filtered by this property with a toggle that allows changing its value:

<template name="list">
  {{#each items}}
    <div class="box" data-id="{{_id}}">
      {{name}}
      <span class="toggle">Toggle</span>
    </div>
  {{/each}}
</template>

 

Template.list.items = function() {
  return Items.find({property: true}, {sort: {name: 1}});
};

Template.list.events({
  'click .toggle': function(e) {
    var item = Items.findOne( $(e.target).closest('.box').data('id') );
    Items.update(item._id, {$set: {
      property: !item.property;
    }});
  },
});

Quite simple. Now, obviously, when I click the toggle for an item, this item property turns to false and it's removed from the list. However, to enable easy undo, I'd like the item to stay in the list. Ideally, until user leaves the page, but a postponed fadeout is acceptable.

I don't want to block the reactivity completely, new items should appear on the list, and in case of name change it should be updated. All I want is for the removed items to stay for a while.

Is there an easy way to achieve this?

Upvotes: 0

Views: 63

Answers (1)

Peppe L-G
Peppe L-G

Reputation: 8345

I would store the removed items in a new array, and do something like this:

var removed = []; // Contains removed items.

Template.list.created = function() {

    // Make it empty in the beginning (if the template is used many times sequentially).
    removed = []

};

Template.list.items = function() {

    // Get items from the collection.
    var items = Items.find({property: true}).fetch();

    // Add the removed items to it.
    items = items.concat(removed)

    // Do the sorting.
    items.sort(function(a, b){ return a.name < b.name}) // May be wrong sorter, but any way.

    return items

};

Template.list.events({
  'click .toggle': function(e) {
    var item = Items.findOne( $(e.target).closest('.box').data('id') );
    Items.update(item._id, {$set: {
      property: !item.property;
    }});
    // Save the removed item in the removed list.
    item.property = !item.property
    item.deleted = true // To distinguish them from the none deleted ones.
    removed.push(item)
  },
});

That should work for you, wouldn't it? But there may be a better solution.

Upvotes: 1

Related Questions