Meteor Template events, Showing error "Template not define" - meteor

Question

I have code like following:
in test.html
<template name="main">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<td>Name</td>
<td>City</td>
<td>Email</td>
</tr>
</thead>
<tbody>
{{#each users}}
<tr>
<td>{{names}}</td>
<td>{{city}}</td>
<td>{{email}}</td>
</tr>
{{/each}}
<tr>
<td><input type="text" name="names" id="names" value=""></td>
<td><input type="text" name="city" id="city" value=""></td>
<td><input type="text" name="email" id="email" value=""></td>
</tr>
</tbody>
</table>
<button class="btn" id="add">Add</button>
</template>
in test.js
UserInfo = new Meteor.Collection('users');
if (Meteor.isClient) {
Template.main.users=function() {
return UserInfo.find();
}
}
Template.main.events({
'click #add': function () {
var names = $('#names').val();
var city = $('#city').val();
var email = $('#email').val();
UserInfo.insert({names:names,city:city,email:email});
}
});
After clicking on add button i want to take input data(name, location and email) and insert data in to the table but it is showing some error like "template not define".

Answer 1

You should move the Template code inside client block and also creating individual helpers is deprecated. Use helpers block instead.
if (Meteor.isClient) {
Template.main.helpers({
users: function() {
return UserInfo.find();
}
});
Template.main.events({
'click #add': function () {
var names = $('#names').val();
var city = $('#city').val();
var email = $('#email').val();
UserInfo.insert({names:names,city:city,email:email});
};
});
}