How to use the meteor/reactive-var.ReactiveVar function in meteor

Template.topicPage.onCreated(function () {
  const instance = this;
  instance.startDay = '';

  instance.eventType = new ReactiveVar('message_published');
  instance.timeframe = '24';
  instance.resetChart = false;

  instance.error = new ReactiveVar();
  instance.chartDataReady = new ReactiveVar();
  instance.statisticsReady = new ReactiveVar();

  instance.trend = new ReactiveVar({});
  instance.topic = new ReactiveVar();
  instance.chartData = new ReactiveVar();
  instance.previousPeriod = new ReactiveVar();
  instance.summaryStatistics = new ReactiveVar();

  instance.dateHistogramRequest = (eventType, topic) => {
    const params = {
      timeframe: instance.timeframe,
      dataType: 'histogram',
      topic,
      eventType,
    };

    // Fetch & process data
    Meteor.call('fetchHistogramTopicData',
      instance.queryOption, params, (error, result) => {
        // Mark data is ready
        instance.chartDataReady.set(true);

instance.tableData = new ReactiveVar([]);

  // Variable that keeps frontend prefix
  instance.frontendPrefix = new ReactiveVar();

  // Variable that keeps loading state value
  // Possible loading state values:
  // 'not-loading'
  // 'loading'
  // 'data-not-found'
  // 'done'
  instance.loadingState = new ReactiveVar('not-loading');

  // Init default values for statistic data
  instance.requestsCount = new ReactiveVar(0);
  instance.averageResponseTime = new ReactiveVar(0);
  instance.responseRate = new ReactiveVar(0);
  instance.uniqueUsersCount = new ReactiveVar(0);

  // Init date formats for each user-case
  instance.analyticsTickDateFormat = {
    d3: {
      hour: '%Y-%m-%d-%H',
      day: '%Y-%m-%d',
      week: '%Y-%m-%W',
      month: '%Y-%m',
    },
    moment: {
      hour: 'YYYY-MM-DD-HH',
      day: 'YYYY-MM-DD',
      week: 'YYYY-MM-ww',
      month: 'YYYY-MM',

Template.search.onCreated(function () {
  // Get reference to Template instance
  const instance = this;

  // Init reactive var for search value with empty string for all results
  instance.searchValue = new ReactiveVar('');

  // Init the query reactive variable
  instance.query = new ReactiveVar();

  // Check if search parameter is set
  if (FlowRouter.getQueryParam('q')) {
    // Get the query string parameter
    const searchValue = FlowRouter.getQueryParam('q');

    // Assign current search value to the reactive variable
    instance.searchValue.set(searchValue);
  }

  instance.autorun(() => {
    const searchValue = instance.searchValue.get();

    // Update API Backends subscription with search value
    instance.subscribe('searchApiBackends', searchValue);

this.customFields = new ReactiveVar();
	this.loading = new ReactiveVar(false);
	Tracker.autorun(() => {
		const Accounts_CustomFields = settings.get('Accounts_CustomFields');
		if (typeof Accounts_CustomFields === 'string' && Accounts_CustomFields.trim() !== '') {
			try {
				return this.customFields.set(JSON.parse(settings.get('Accounts_CustomFields')));
			} catch (error1) {
				return console.error('Invalid JSON for Accounts_CustomFields');
			}
		} else {
			return this.customFields.set(null);
		}
	});
	if (Session.get('loginDefaultState')) {
		this.state = new ReactiveVar(Session.get('loginDefaultState'));
	} else {
		this.state = new ReactiveVar('login');
	}
	this.validSecretURL = new ReactiveVar(false);
	const validateCustomFields = function(formObj, validationObj) {
		const customFields = instance.customFields.get();
		if (!customFields) {
			return;
		}

		for (const field in formObj) {
			if (formObj.hasOwnProperty(field)) {
				const value = formObj[field];
				if (customFields[field] == null) {
					continue;
				}

Template.Admin_DataModel_Reviews_Page.onCreated(function onCreated() {
  this.updateID = new ReactiveVar('');
});

Template.listPrivateGroupsFlex.onCreated(function() {
	this.groups = new ReactiveVar([]);
	this.hasMore = new ReactiveVar(true);
	this.limit = new ReactiveVar(50);
	this.nameFilter = new ReactiveVar('');
	this.sort = new ReactiveVar('name');

	return this.autorun(() => {
		this.hasMore.set(true);
		const options = { fields: { name: 1 } };
		if (_.isNumber(this.limit.get())) {
			options.limit = this.limit.get();
		}
		if (s.trim(this.sort.get())) {
			switch (this.sort.get()) {
				case 'name':
					options.sort = { name: 1 };
					break;
				case 'ls':
					options.sort = { ls: -1 };
					break;
			}

Template.adminRooms.onCreated(function() {
	const instance = this;
	this.offset = new ReactiveVar(0);
	this.total = new ReactiveVar(0);
	this.filter = new ReactiveVar('');
	this.types = new ReactiveVar([]);
	this.rooms = new ReactiveVar([]);
	this.ready = new ReactiveVar(true);
	this.isLoading = new ReactiveVar(false);
	this.tabBar = new RocketChatTabBar();
	this.tabBarData = new ReactiveVar();
	this.tabBar.showGroup(FlowRouter.current().route.name);
	TabBar.addButton({
		groups: ['admin-rooms'],
		id: 'admin-room',
		i18nTitle: 'Room_Info',
		icon: 'info-circled',
		template: 'adminRoomInfo',
		order: 1,

Template.ballot.onCreated(() => {
  Template.instance().forks = _generateForks(this.contract);
  Template.instance().emptyBallot = new ReactiveVar();
  Template.instance().ballotReady = new ReactiveVar();
  Template.instance().removeProposal = new ReactiveVar();
  Template.instance().contract = new ReactiveVar(Template.currentData().contract);
  Template.instance().ticket = new ReactiveVar(getContractToken({ contract: Template.currentData().contract, isButton: true }));
  Template.instance().voteEnabled = verifyConstituencyRights(Template.currentData().contract);
  Template.instance().pollScore = new ReactiveVar(0);

  Template.instance().imageTemplate = new ReactiveVar();
  templetize(Template.instance());

  Template.instance().data.summoningTime = Template.currentData().contract.closing.summoningTime;
  Template.instance().data.summoningTime = Template.currentData().contract.closing.periodDuration;
  Template.instance().now = new ReactiveVar();
  currentBlock(Template.instance());
});

'use strict';
import { _ } from 'meteor/underscore';
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/kadira:flow-router';
import { ReactiveVar } from 'meteor/reactive-var';
import { dbCompanyArchive } from '/db/dbCompanyArchive';
import { inheritedShowLoadingOnSubscribing } from '../layout/loading';
import { shouldStopSubscribe } from '../utils/idle';
import { rCompanyListViewMode } from '../utils/styles';
import { investArchiveCompany } from '../utils/methods';

inheritedShowLoadingOnSubscribing(Template.companyArchiveList);
const rKeyword = new ReactiveVar('');
const rMatchType = new ReactiveVar('exact');
export const rArchiveOffset = new ReactiveVar(0);
Template.companyArchiveList.onCreated(function() {
  this.autorun(() => {
    if (shouldStopSubscribe()) {
      return false;
    }
    this.subscribe('companyArchiveList', {
      keyword: rKeyword.get(),
      matchType: rMatchType.get(),
      offset: rArchiveOffset.get()
    });
  });
});
Template.companyArchiveList.helpers({
  viewModeIsCard() {
    return rCompanyListViewMode.get() === 'card';

Template.popout.onCreated(function() {
	this.isMinimized = new ReactiveVar(popout.isAudioOnly);
	this.isAudioOnly = new ReactiveVar(popout.isAudioOnly);
	this.canOpenExternal = new ReactiveVar(popout.canOpenExternal);
	this.showVideoControls = new ReactiveVar(popout.showVideoControls);
	this.showStreamControls = new ReactiveVar(popout.showStreamControls);

	this.isMuted = new ReactiveVar(false);
	this.isPlaying = new ReactiveVar(true);
	this.streamStatus = new ReactiveVar('preparing');
	document.body.addEventListener('dragstart', popout.dragstart, true);
	document.body.addEventListener('dragover', popout.dragover, true);
	document.body.addEventListener('dragend', popout.dragend, true);
	document.body.addEventListener('drop', popout.drop, true);
});