Question

我有一个模板来管理我的收藏中的重要属性。这是一个由此属性过滤的简单列表，其中包含一个允许更改其值的切换：

<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并从列表中删除。但是，要启用轻松撤消，我希望该项目保留在列表中。理想情况下，在用户离开页面之前，可以接受推迟的淡出。

我不想完全阻止反应，新项目应出现在列表中，如果更改名称，则应更新。我想要的只是让被移除的物品停留一段时间。

有没有简单的方法来实现这一目标？

Answer 1

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

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

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

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

1 个答案: