1

使用 Meteor，我试图循环并显示数据库中的笔记列表，并带有删除每个笔记的选项。

这是 HTML（使用 Handlebars.js）

<template name="Notes">
    {{#each NoteArr}}
        <div class="Note">
            <h2>{{Title}}</h2>
            <p>{{Body}}</p>
            <span class="deleteNote">Delete</span>
        </div>
    {{/each}}
</template>

这是客户端Javascript

Template.Notes.events = {
    "click .deleteNote" : function(){
        noteID = $('.deleteNote').parent().attr("id");
        Notes.remove({ID:noteID});
    }
};

这会抓取 .deleteNote 的第一个实例，因此除非我尝试删除第一个实例，否则这无济于事。如何获取单击的 .deleteNote 特定实例的父级，而不仅仅是找到的第一个？

4

2 回答 2

4

删除第一个元素的原因是.. 在您的.click事件中，您直接访问 div ，因为$('.deleteNote').parent()它获取了 html 中具有 class 的第一个节点.deleteNode。

notes现在从集合中删除特定的 , ：集合 中的每个文档都有一个_id自动生成的唯一属性。将文档的唯一_id性分配给 span 元素作为<span id= "{{_id}}" class="deleteNote">Delete</span>.

因此 cilck 事件将如下所示：

 Template.Notes.events = {
    "click .deleteNote" : function(e){
        var noteID = e.currentTarget.id;
        Notes.remove({_id:noteID});
        }
   };

模板将如下所示：

<template name="Notes">
    {{#each NoteArr}}
        <div class="Note">
            <h2>{{Title}}</h2>
            <p>{{Body}}</p>
            <span id= "{{_id}}" class="deleteNote">Delete</span>
        </div>
    {{/each}}
</template>

未经测试的代码，但希望这将有助于解决您的问题。

于 2012-11-22T05:36:41.987 回答
4

笔记的 _id 也存储在“this”中。此外，remove 函数接受 '_id' 作为字符串。所以这也应该有效：

Template.Notes.events = {
  'click .deleteNote': function(){ return Notes.remove(this._id)}
}

这里有一些好处。更少查询 DOM 以获取信息。少 jQuery。需要考虑的代码行数更少。更清洁的模板。

于 2013-01-26T17:58:07.217 回答