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

最初の要素が削除される理由は..あなたのイベントでは、クラスを持つhtmlの最初のノードを取得.clickするようにdivに直接アクセスしています。$('.deleteNote').parent().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 に答える