#meteor
#метеор
Вопрос:
Я пытаюсь добавить функцию удаления, которая, если я нажимаю на элемент списка (шаблон), добавляет выбранный класс в 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);
}
});
Комментарии:
1. опять же, я говорю вам опубликовать ВСЕ ваши связанные коды. вы снова не указали шаблон ListItem.
Ответ №1:
Вы не можете получить идентификатор подобного объекта. Либо ваша кнопка должна находиться внутри документа, который вы собираетесь удалить, либо вы должны включить _id
в свои HTML-атрибуты и получить это значение.
Итак, просто добавьте 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);
});
Комментарии:
1. Могу я спросить вас, почему вы использовали const
2. @AmyTeresaHyland, потому что это постоянное значение. мы не будем изменять его позже