As promised
-------------------------------
<head>
<title>Dropdown Test</title>
</head>
<body>
<div class="container">
{{> main}}
</div>
</body>
<template name="main">
<table>
<tbody>
{{#each persons}}
<tr>
<td>{{> dropdown}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
<template name="dropdown">
<div class="btn-group {{#if isOpen}}open{{/if}}">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Tasks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><input type="text" name="name" /></li>
{{#each tasks}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
</template>
-----------------------------
Persons = new Meteor.Collection("persons");
if (Meteor.isClient){
Template.main.persons = function(){
return Persons.find();
};
Template.dropdown.isOpen = function(){
return Session.equals("open_dropdown", this._id);
};
Template.dropdown.events({
"click div.btn-group" : function(ev,n){
Session.set("open_dropdown", this._id);
},
"click input" : function(ev,n){
ev.stopPropagation();
},
"change input" : function(ev){
Persons.update(this._id, {$push : { tasks : ev.target.value} });
}
});
Meteor.startup(function(){
$(document).on('click.dropdown.data-api touchstart.dropdown.data-api',
function(e){
Session.set("open_dropdown", undefined);
});
});
} else {
if (Persons.find().count() === 0){
Persons.insert({name : "Alice", tasks : []});
Persons.insert({name : "Bob", tasks : []});
}
}
Thanks for your help