Passing data between helpers, events and templates

help
1

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.

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; &nbsp; &nbsp; &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();
 		ContactsList.insert({
			firstname: {{firstname}},
			lastname: {{lastname}},
			email: {{email}},
			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?

2

You can access the data via this._id.

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;

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

I think this should work for you. :slight_smile:

1 Like
3

Thank you for the suggestion. However. It doesnt seem to be currently working still. I copied it verbatim as you put. It isnt showing any errors in the console or the command prompt, just simple a button being clicked and nothing else.

Any other suggestions? Much appreciated

4

i think if you publish all fields. in events you just can use ‘this’ and it will return the current doc. your code look like this.

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

    var currentContactFirstname = this.firstname;
    var currentContactLastname = this.lastname;
    var currentContactEmail = this.email;
    var currentUserId = Meteor.userId();

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

Strange. This works for me. I simplified it a bit, but in general my code looks extremely similar to yours:

HTML

<template name="page_products">
	{{#each products}}
		{{title}}
	    	<button class="button--favorite">Add</button>
	{{/each}}
</template>

JS

Template.page_products.events({
	'click .button--favorite': function() {
		var currentUser = Meteor.userId();
		var currentProduct = Products.findOne(this._id);
		var currentProductTitle = currentProduct.title;

		// I'm using update + addToSet because I'm storing all titles in one big array (attached to the user profile)
		Meteor.users.update({_id: currentUser}, {$addToSet: {'profile.favorites': currentProductTitle}});

		// This should work as well
		ContactsList.insert({ title: currentProductTitle });
	}
});

Hm… maybe doublecheck your collection-names?

Also I think you don’t need the event.preventDefault(); for a button. But its probably not the source of the problem, but give it a try.

And finally, throw some console.log statements in there to see which parts are working. (e.g. console.log(currentProductTitle); in my case)

1 Like
6

Thank you everyone for all the help. apparently i just needed to change the html of my button from id=“addfriend” to class=“addfriend”

Its the simple things i guess. Thank you!

1 Like