Question

我正在尝试添加一个删除功能，如果我点击一个列表项（模板），它会将一个选定的类添加到li。然后，我希望能够单击一个按钮，该按钮找到具有所选类的li，并将数据传递给meteor方法，该方法从集合中删除数据。我如何访问这些数据。

我尝试了几种方法，但这是我到目前为止所做的。

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并获取该值。

只需将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。由于您单击某个项目以将其选中，因此您可以在该事件中设置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); });

带有选定类的Meteor删除列表项

1 个答案: