CODEWITHSUNDEEP
meteor
Bren
Bren

Reputation: 273

Reactive Variables in Meteor - basic use case

I'm building a project using Meteor and trying to understand how to use reactive variables. I've read everything I can find on them but every example seems to give a different syntax for how to include them. For what is supposed to be a core strength of Meteor, I'm pretty sure I'm overthinking this. My use cases are simple - I'm sure if I can get one working right, I'll be able to replicate easily.

The first use case is for creating a one page company profile. Users add a new company to a collection by filling out three fields in a form - name, sector and status. The status would be Public or Private and chosen in a drop-down. On submit, the user is taken to the Company Profile where these fields are populated in a template, with additional templates for stock price/market cap, financials, etc. I would like the template showing the stock price and market cap (CompanyCapTable) to appear only when the status field is Public and not for Private. I assume I can make status a reactive variable to do so.

client/templates/company_profile.html

<div class="company-template">
    {{#if isPublic}}
        <div class="company-template" id="company-captable">
            {{> CompanyCapTable}}
        </div>
    {{else}}
        <p><em>Private Company</em></p>
    {{/if}}
</div>

client/templates/company_profile.js

Template.CompanyProfile.helpers({
isPublic: function () {
    return Session.get("status")
}
});

This is where I get lost. What is the best way to set status as a reactive variable? I see examples using Session, Deps (choose between those two?), Tracker, etc, but I'm missing something. This is the code I tried for the prior page where the status is originally selected but even when I choose Public, I'm only getting the Private result.

client/templates/company_create.html

...
<div>
    {{> afFieldInput name='status' type="select" class="form-control"}}
</div>
...

client/templates/company_create.js

Template.CompanyCreate.events({
'submit': function(event) {
    var value = $(event.target).val();
    Session.set('status', value);
}
});

Thank you in advance for any thoughts. Brendan

Upvotes: 0

Views: 1792

Answers (1)

Manuel
Manuel

Reputation: 11489

In your case you're doing it right (with Session variables) because the status is set in another template. There's little room to play with there.

If you were setting the status in the same template then I would recommend using a reactive var in the template instance:

Template.CompanyProfile.onCreated(function() {
  this.status = new ReactiveVar(defaultStatus);
})
Template.CompanyProfile.helpers({
  isPublic: function() {
    return Template.instance().status.get();
  }
})
Template.CompanyProfile.events({
  'click button': function() {
    Template.instance().status.set(newValue);
  }
})

btw, Deps is the old name for Tracker and it's used when you want a piece of code to run again if the reactive variables inside of it change.

Upvotes: 1

Related Questions