Meteor - 在助手，事件和模板之间传递数据

Question

I'm not sure how to approach my issue. Whether I should set my variables in my event to my spacebars syntax fields from my template or pass my returned event data into my helpers somehow. Everything is published and subscribed properly too.

Problem: I am trying to make it so users can click an "Add" button next to any of the people in a directory list (DirectoryList collection) and have that users information be added to a Contacts List collection. Its simply a messaging app where a person can scroll a directory of everyone and add users to their contacts list. Here are my files:

templates > directoryList.html

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

helpers>directoryList.js

Template.directoryList.helpers({

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

});

events>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
        });
    }
});

its obviously throwing me an error for the {{}} syntax in my event but i dont know what else to do or how to get this to work. Thought it might be able to inherit from the template those fields but i guess not?

Answer 1

In your event handler this already contains the current contact, you don't need to look it up again. You can simplify your event handler down to:

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()
        });
    }
});

Answer 2

You event handler is for addButton class, where you button doesn't have addButton class. You need to change id to class in your template.

<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>

And you can follow other answer to avoid unnecessary query to improve performance.

Hope it helps.