選択されたクラスのメテオ削除リスト項目

Question

リスト項目（テンプレート）をクリックすると、選択したクラスがliに追加されるという削除機能を追加しようとしています。次に、選択されたクラスのliを検索するボタンをクリックし、コレクションからデータを削除する流星メソッドにデータを渡したいと考えています。このデータにどのようにアクセスすればいいですか？

私はいくつかの方法を試しましたが、これまでのところこれがあります。あなたがIDを取得することはできません

sidebar.js

Template.Sidebar.events({ 
    'click .button-collapse': function() { 
     console.log("here") 
     $(".button-collapse").sideNav(); 
    }, 
    'click #delete i': function() { 
     Meteor.call('deleteListItem', $("li.selected")._id); 
    } 
}) 

sidebar.html

<template name="Sidebar"> 
<ul id="slide-out" class="side-nav fixed grey darken-3"> 
    <li class="action-bar"> 
     <span id="add-new" data-target="modal-add" class="modal-trigger"><i class="small material-icons">add</i></span> 
     <span id="save"><i class="small material-icons">note_add</i></span> 
     <span id="rename"><i class="small material-icons">mode_edit</i></span> 
     <span id="delete"><i class="small material-icons">delete</i></span> 
     <span data-activates="slide-out" id="close" class="button-collapse close "><i class="small material-icons right">reorder</i></span> 
    </li> 
    <!-- Load save items--> 
    {{#if Template.subscriptionsReady}} 
     {{#each userSaves}} 
      {{>ListItem}} 
     {{/each}} 
    {{else}} 
     <p>Loading</p> 
    {{/if}} 
</ul> 
<a href="#" data-activates="slide-out" style="display:none" class="button-collapse"><i class="material-icons">menu</i></a> 
<!-- Modal form to add new simulator file --> 
<!-- Modal Structure --> 
<div id="modal-add" class="modal"> 
    <div class="modal-content"> 
     <h4>New Simulator</h4> 
     {{> quickForm collection=saves id="newSimulator" type="insert" buttonClasses="modal-action modal-close btn waves-effect waves-light" buttonContent="Add"}} 
    </div> 
</div> 
</template> 

リストクラス

Meteor.methods({ 
    deleteListItem: function(id) { 
     Saves.remove(id); 
    } 
}); 

Answer 1

そのようなオブジェクトの。削除する文書の中にボタンがあるか、_idをHTML属性に含めてその値を取得する必要があります。

だから、単にあなたのループであなたの<li>にdata-value="{{_id}}"を追加し、このように選択します：

//this will retrieve the id of one selected element only 
//you need to use each/forEach if you want to remove multiple 
$('li.selected').attr('data-value') 

はEDIT：

別の解決策は、Sessionを使用することでしょう。あなたはそれを選択するために、項目をクリックするので、あなたはそのイベントにSessionを設定することができます

//in the click event where you select a list item 
Session.set('itemId', this._id); 

//in Sidebar events 
'click #delete i': function() { 
    const itemId = Session.get('itemId'); 
    Meteor.call('deleteListItem', itemId); 
} 

EDIT 2：

あなたは、セッション・ソリューションを使用する場合は、セッションを削除するのを忘れていない場合テンプレートが破棄されます。そうでないと（別のルートに移動して選択したアイテムを削除せずに戻って、削除ボタンをクリックすると、選択されていないように見えてもドキュメントは削除されます）。

Template.templateName.onDestroyed(function(){ 
    Session.set('sessionName', undefined); 
});