CODEWITHSUNDEEP
meteor
Mercutionario
Mercutionario

Reputation: 446

How to dynamically change the background image in Meteor?

I'm new to meteor and a bit struggling with the templating system.

I'd like to change the background-image property of the .body css class in meteor, according to the change in state of a variable in my db.

It's a leaderboard app (from the examples) with two players, when Joe's score is > 0, the background image should be joe.png, otherwise it's jack.png.

Thanks for the tip !

Upvotes: 1

Views: 2066

Answers (1)

Tarang
Tarang

Reputation: 75955

Add this in the (isClient) block

Meteor.autorun(function() {
    if(Players.findOne({name:"Joe"}).score > 0) {
        $('body').css('background-image','url(/joe.png)');
    }
    else
    {
        $('body').css('background-image','url(/jack.png)');
    }
}

Basically Meteor.autorun will run the function when a reactive variable used inside it changes Players in this case. So when your players db changes, it will run this block of code.

Upvotes: 6

Related Questions