Manage the reactivity among different visitors - meteor

Question

As a beginner, I'm building some tests and trainings.
For now, I have a Monkeys collection that displays a list of monkeys names and ages. Visitors can add or remove monkeys. When a visitor adds a monkey to the list, I wish it would not be visible to the others until they update the list with an update button.
I tried several ways without finding how to reach this purpose.
What is the best way? Or what have I to learn to do it?
Here is my js file(and, of course, all is entirely reactive for now).
//Monkeys collection subscription is in the waitOn function in the router.js page
//--------------------------------------------------------------------
Template.hello.helpers({
monkeys: function(){
var listMonkeys = Monkeys.find({}, {sort: { age: -1, name: 1}});
return listMonkeys;
}
});
//---------------------------------------------------------------------
Template.hello.events({
// insert new monkey
'submit': function (e) {
e.preventDefault();
var name = e.target.new_name.value;
var age = parseInt(e.target.new_age.value);
Monkeys.insert({"name":name,"age":age}, function(error, result) {
if (error) {alert(error.message);}
});
},
//delete this monkey
'click .delete': function(){
var name = this.name;
Monkeys.remove({"_id":this._id}, function(error, result) {
if (result) {alert(name + " has been deleted");}
if (error) {alert(error.message);}
});
},
//update listMonkeys
'click #updatelistMonkeys': function(){
// ... update function
}
});
//--------------------------------------------------------------------------
//There are only some tests in order to understand how works Meteor startup function
Meteor.startup(function () {
var listMonkeys = Monkeys.find({}, {sort: { age: -1, name: 1}}).fetch();
console.log("Meteor.startup: ");
console.log(listMonkeys);//return a empty array
Tracker.autorun(function(){
var listMonkeys = Monkeys.find({}, {sort: { age: -1, name: 1}}).fetch();
console.log("Tracker.autorun: ");
console.log(listMonkeys)//at first, return a empty array, immediately after,return the filled array
})
});
Here is my html template:
<template name="hello">
<h2>Monkeys forever!</h2>
<button id = "updatelistMonkeys"><img src="images/update-contacts-icon.png" style= "width: 2em;"></button>
{{#each monkeys}}
<p class = "listMonkeys">Name: {{name}} - age: {{age}} <button class="delete">X</button></p>
{{/each}}
<form>
<legend ><b>Add a new Monkey: </b> </legend>
<input type="text" name="new_name">
<input type="number" name="new_age">
<button type="submit">submit</button>
</form>
</template>

Answer 1

You can disable reactivity within your helper by making two modifications, include the reactive: false option and add .fetch() to the end, to force the results to be retuned, not a cursor. Try this:
monkeys: function() {
return Monkeys.find({}, {sort: {age: -1, name: 1}, reactive: false}).fetch();
}
Got this work around from a github issue:
https://github.com/meteor/meteor/issues/771

Answer 2

You can load your data from a server method, this solves some problems you have right now but you still need to dev a notification system for your update button to rerun the server method.
// server/methods.js
Meteor.methods({
getMonkeys: function () {
return Monkeys.find({}, {sort: { age: -1, name: 1}}).fetch();
}
})
//tpl helper
Template.hello.helpers({
monkeys: function(){
Meteor.call("getMonkeys", function(err,monkeys){
if(err){
//do smth with the error
}
return monkeys;
})
}
})

Answer 3

# Brian Shambien: it still reactive. You can see there ==> monkeys.meteor.com
I suppose it's because the variable is in a reactive context and re-evaluated each time it changes.
Template.hello.helpers({
monkeys: function(){
var listMonkeys = Monkeys.find({}, {sort: {age: -1, name: 1}, reactive: false}).fetch();
return listMonkeys;
}
});