Блог

Я пытаюсь добавить функцию удаления, которая, если я нажимаю на элемент списка (шаблон), добавляет выбранный класс в 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);
    }
});
  

Вы не можете получить идентификатор подобного объекта. Либо ваша кнопка должна находиться внутри документа, который вы собираетесь удалить, либо вы должны включить _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);
});