Meteor - 选择被点击元素的父 ID答案

【问题标题】：Meteor - Select Parent ID of element clickedMeteor - 选择被点击元素的父 ID
【发布时间】：2013-01-27 01:58:07
【问题描述】：

使用 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 特定实例的父级，而不仅仅是它找到的第一个？

【问题讨论】：

标签： meteor handlebars.js

【解决方案1】：

删除第一个元素的原因是.. 在您的.click 事件中，您直接以$('.deleteNote').parent() 访问div，它获取了html 中具有.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>

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

不知道 _id 是在“this”中传播的。很好，很干净。