防止反应性从模板中删除数据

Prevent reactivity from removing data from template

本文关键字：删除 数据      更新时间：2023-09-26

我有一个模板来管理集合中的重要属性。这是一个由该属性过滤的简单列表，带有允许更改其值的切换：

<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;
    }});
  },
});

很简单。现在，很明显，当我单击项目的切换时，这个项目属性会变为false，并从列表中删除。但是，为了便于撤消，我希望该项目保留在列表中。理想情况下，直到用户离开页面，但可以接受延迟的淡出。

我不想完全阻止反应性，新项目应该出现在列表中，如果名称更改，应该更新。我只想让删除的项目保留一段时间。

有没有一种简单的方法可以实现这一点？

我会将删除的项存储在一个新的数组中，并执行如下操作：

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)
  },
});

这应该对你有用，不是吗？但可能还有更好的解决方案。

相关文章：