流星刪除列表項與選定

Question

類

我嘗試添加刪除功能，如果我在一個列表項單擊（模板）它增加了一個選擇的類鋰。然後，我希望能夠點擊一個按鈕，找到一個選定類的li，並將數據傳遞給流星方法，以從集合中刪除數據。我如何訪問這些數據。

我已經嘗試了一些方法，但是這是我到目前爲止所。

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屬性中包含_id並獲取該值。

另一種解決方案將使用Session：

所以，簡單地在你的循環添加data-value="{{_id}}"您<li>並獲得所選擇的是這樣的：

//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') 

編輯。既然你點擊一個項目以選擇它，你可以在事件中設置一個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); 
} 

編輯2：

如果你用會話的解決方案，不要忘記刪除會話時模板被破壞。否則（對於您的用例），當您轉到其他路線並返回而不刪除所選項目並單擊刪除按鈕時，即使它看起來未被選中，它也會刪除該文檔。

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