流星删除列表项与选定

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