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 に答える