0

我有一个模板来管理我收藏中的重要财产。这是一个由该属性过滤的简单列表,带有一个允许更改其值的切换:

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

我不想完全阻止反应,新项目应该出现在列表中,并且在名称更改的情况下应该更新它。我想要的只是让被移除的物品保留一段时间。

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

4

1 回答 1

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

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

于 2013-07-30T19:34:33.410 回答