Meteor : How to use ReactiveVar ?

Some times do you wan’t change values automatically in your page. In this situations you can use “ReactiveVar”.

ReactiveVar package : https://atmospherejs.com/meteor/reactive-var 

Oficial documentation : http://docs.meteor.com/#/full/reactivevar_pkg

Add the package : meteor add reactive-var

Example : I wan’t show a new letter when somebody click in a button .

For I have all letters, I will insert this when I startup my application.

config.js

Meteor.startup(function () {
    loadLetters();
});

function loadLetters(){

    if ( Letters.find({}).count() == 0 ){
        insertLettersDB();
    } else if ( Letters.find({}).count() != 25 ){
        removeLettersAll();
        insertLettersDB();
    }
}

function removeLettersAll(){
    Letters.find({}).forEach(
        function(i) {
            Letters.remove(i);
        }
    )
}

function insertLettersDB(){
    var count = 1;
    takeAllLetters().forEach(
        function(i) {
            Letters.insert({key:count,value:i})
            count += 1;
        }
    )
}

function takeAllLetters(){
    var letters = [
        'A','B','C','D','E',
        'F','G','H','I','J',
        'L','M','N','O','P',
        'Q','R','S','T','U',
        'V','X','Z','Y','K'
    ];
    return letters;
}

My collection :

letters-collections.js

Letters = new Mongo.Collection("letters");

My Html file :

home.html

{...}

{{#if isShowResult}}
    {{_ "stop-letter-is"}} {{letter}}
{{/if}} 

{...}

home.js

var letter = new ReactiveVar("");
Template.home.events({
    'click #start': function (e) {
        var id = getRandoInt(1,25);
        letter.set(Letters.findOne({key:id}).value);
    }
});


Template.home.helpers({
    'letter':function(){
        return letter.get();
    },
    isShowResult:function(){
        return letter.get().length > 0;
    }
});


function getRandoInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Finally you can check how it works in : http://playstop.meteor.com/

If you want take all source of this example :  https://bitbucket.org/exemples/playstop

4 Comments

  1. With havin so much content and articles do you ever run into any issues of plagorism or copyright infringement?
    My website has a lot of completely unique content I’ve either authored myself or outsourced but it
    looks like a lot of it is popping it up all over the internet without my agreement.
    Do you know any ways to help stop content from being
    ripped off? I’d certainly appreciate it.

    Like

  2. Thanks for the auspicious writeup. It in reality was a leisure account it.

    Look advanced to more delivered agreeable from
    you! However, how could we be in contact?

    Like

  3. Woah! I’m realpy digging tɦe template/theme oof tҺis website.
    ӏt’s simple, yeet effective. Α lot oof tіmeѕ іt’s tough
    tօо gеt thаt “perfect balance” betwеen superb usability ɑnd visual appearance.
    ӏ must say ʏou haѵe done a amazing job աith this.

    Alѕo, the blog loads super fast for me on Safari.
    Excellent Blog!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s