流星 - ヘルパー、イベント、テンプレートの間でデータを渡す

Question

私の問題にどうやってアプローチするのか分かりません。私のテンプレート内のスペースバーの構文フィールドに自分の変数を設定したり、返されたイベントデータを何らかの形でヘルパーに渡したりするかどうか。すべてが公開され、適切に購読されています。

問題：ユーザーがディレクトリリスト（DirectoryListコレクション）内のユーザーの横にある[追加]ボタンをクリックし、そのユーザー情報を連絡先リストコレクションに追加できるようにしようとしています。誰かのディレクトリをスクロールして連絡先リストにユーザーを追加できるメッセージングアプリです。ここに私のファイルは、以下のとおりです。

テンプレート> directoryList.html

<template name="directoryList"> 
    {{> searchDirectory}} 
    <ul> 
     {{#each directoryList}} 
      <li> 
       {{firstname}} {{lastname}} &nbsp; <button name="addFriend" id="addFriend">Add</button> 
      </li> 
     {{/each}} 
    </ul> 
</template> 

ヘルパー> directoryList.js

Template.directoryList.helpers({ 

    'directoryList': function(){ 
     return DirectoryList.find({}, {sort: {createdAt: -1}}); 
    } 

}); 

イベント> directoryList.js

Template.directoryList.events({ 

    'click .addFriend': function(event){ 
     event.preventDefault(); 

     var currentUserId = Meteor.userId(); 
     var currentContact = DirectoryList.findOne(this._id); 
     var currentContactFirstname = currentContact.firstname; 
     var currentContactLastname = currentContact.lastname; 
     var currentContactEmail = currentContact.email; 
     console.log("test"); 

     ContactsList.insert({ 
      firstname: currentContactFirstname, 
      lastname: currentContactLastname, 
      email: currentContactEmail, 
      createdBy: currentUserId 
     }); 
    } 
}); 

そのは明らかに私に投げます私のイベントの{{}}構文のエラーですが、他に何をするか、またはこれを動作させる方法がわかりません。それらのフィールドをテンプレートから継承することができるかもしれないと思ったが、私はそう思わないだろうか？

Answer 1

あなたのイベントハンドラは、ボタンaddButtonクラスを持っていないaddButtonクラス、ためです。テンプレートのidをclassに変更する必要があります。

<template name="directoryList"> 
    {{> searchDirectory}} 
    <ul> 
     {{#each directoryList}} 
      <li> 
       {{firstname}} {{lastname}} &nbsp; <button name="addFriend" class="addFriend">Add</button> <!-- CHANGED ID TO CLASS FOR THIS BUTTON --> 
      </li> 
     {{/each}} 
    </ul> 
</template> 

また、パフォーマンスを向上させるために不要なクエリを避けるために、他の答えに従うことができます。

希望します。

Answer 2

イベントハンドラthisにはすでに現在の連絡先が含まれているため、再度検索する必要はありません。あなたはまでごイベントハンドラを簡素化することができます。

Template.directoryList.events({ 

    'click .addFriend': function(event){ 
     event.preventDefault(); 
     console.log(this); 

     ContactsList.insert({ 
      firstname: this.firstname, 
      lastname: this.lastname, 
      email: this.mail, 
      createdBy: Meteor.userId() 
     }); 
    } 
});