流星 - 選擇單元元素的父母ID點擊

Question

使用流星，我試圖循環並顯示數據庫中的筆記列表，並帶有刪除每個筆記的選項。

這裏是（使用Handlebars.js）

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

而且這裏的HTML是客戶端的Javascript

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

這抓住.deleteNote的第一個實例，所以除非我試圖刪除第一個，這將無濟於事。我如何獲取被點擊的.deleteNote特定實例的父對象，而不僅僅是它找到的第一個實例？

Answer 1

第一個元素被刪除的原因是..在您的.click事件中，您直接訪問div，其格式爲$('.deleteNote').parent()，它抓取了具有類.deleteNode的html中的第一個節點。

我們刪除特定notes，從集合：集合中的每個文件都有其自動生成一個唯一的_id屬性。將文檔的唯一_id分配給span元素，如<span id= "{{_id}}" class="deleteNote">Delete</span>。

因此，依序按一下[事件看起來像：

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> 

未經測試的代碼，但希望這將有助於解決您的問題。

Answer 2

音符的_id也存儲在'this'中。另外，remove函數接受'_id'作爲字符串。所以這應該也是如此：

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

這裏有一些好處。減少查詢DOM的信息。少了jQuery。更少的代碼需要考慮。清潔模板。