HELP - Trying to automate using data attributes and ReactiveDict

help
1

I’m trying to automate naming conventions used for a reactive dictionary, but I’m stuck not knowing how to access the reactive dictionary key based on the data attribute I fetched on click.

Expected: Use same naming convention for both ReactiveDict keys and data-attribute names on HTML elements so I can fetch the name on the element clicked, take its data-attribute name and automatically know which ReactiveDict key it is because they use the same name.

Result: It’s not recognizing the naming convention when trying to set or get from the ReactiveDict because… I don’t know. I’m guessing it’s because when you create a ReactiveDict, you use this convention template.search.set(‘generic_name’, data) but it won’t work if I replace ‘generic_description’ with the data-attribute name on click.

Please see example code below and advise if you have any questions, request for more info, or funny jokes since we’re all trapped at home avoiding the COVID-19 virus :slight_smile:

home-template.html

<template name="home_template">
    <section class="home-template">
        <div class="content">
            <div class="filter-box">
                <ul>
                    <legend class="sui-category__title">CATEGORY 1</legend>
                    {{#each option in category_one}}
                    <li data-filter-value="{{option.value}}" data-category-name="category_one">
                        <div class="circle">{{formatToNumberWithComma(option.count)}}</div>
                        <h4>{{option.value}}</h4><input id="filter-1-{{get_this(option)}}" type="checkbox" /><label for="filter-1-{{get_this(option)}}"><i class="fa fa-check"></i></label>
                    </li>
                    {{/each}}
                </ul>
                <span class="more-options">+ More</span>
            </div>
            <div class="filter-box">
                <ul>
                    <legend class="sui-category__title">CATEGORY 2</legend>
                    {{#each option in category_two}}
                    <li data-filter-value="{{option.value}}" data-category-name="category_two">
                        <div class="circle">{{formatToNumberWithComma(option.count)}}</div>
                        <h4>{{option.value}}</h4><input id="filter-2-{{get_this(option)}}" type="checkbox" /><label for="filter-2-{{get_this(option)}}"><i class="fa fa-check"></i></label>
                    </li>
                    {{/each}}
                </ul>
                <span class="more-options">+ More</span>
            </div>
            <div class="filter-box">
                <ul>
                    <legend class="sui-category__title">CATEGORY 3</legend>
                    {{#each option in category_three}}
                    <li data-filter-value="{{option.value}}" data-category-name="category_three">
                        <div class="circle">{{formatToNumberWithComma(option.count)}}</div>
                        <h4>{{option.value}}</h4><input id="filter-3-{{get_this(option)}}" type="checkbox" /><label for="filter-3-{{get_this(option)}}"><i class="fa fa-check"></i></label>
                    </li>
                    {{/each}}
                </ul>
                <span class="more-options">+ More</span>
            </div>
        </div>
    </section>
</template>

home-template.js

Template.home_template.onCreated(() => {
	const template = Template.instance();

	template.search = new ReactiveDict();
	template.search.set('category_one');
	template.search.set('category_two');
	template.search.set('category_three');
	template.search.set('filter_parameters');
});

Template.home_template.events({
	'click .home-template label': function (event, template) {
		$(event.currentTarget).parent('li').toggleClass('active');

		const category_clicked = $(event.currentTarget).parent('li')[0].dataset.categoryName;
		const filter_selected = $(event.currentTarget).parent('li')[0].dataset.filterValue;
		const array = template.search.get(category_clicked);

		array.indexOf(filter_selected) === -1 ? array.push(filter_selected) : array.splice(array.indexOf(filter_selected), 1);
		template.search.set(category_clicked, array);

		const filter_parameters = {
			filters: {
				all: [{
					category_one: template.search.get('category_one'),
				},
				{
					category_two: template.search.get('category_two'),
				},
				{
					category_three: template.search.get('category_three'),
				},
				],
			},
		};

		template.search.set('filter_parameters', filter_parameters);
	},
});

Thank you!

2

How about something like this

const State = new ReactiveDict('state');

State.setDefault('inputOne', 'One');
State.setDefault('inputTwo', 'Two');
State.setDefault('inputThree', 'Three');

Template.reactive_dict_test.helpers({
  ids(){
    return Object.keys(State.keys);
  },
  val() {
    return State.get(this);
  },
});

Template.reactive_dict_test.events({
  'change input'(event, instance) {
    const c = event.currentTarget;
    State.set(c.id, c.value);
  },
});

with

<template name='reactive_dict_test'>
  {{#each ids}}
    <input type="text" id="{{this}}" value="{{val}}">
  {{/each}}
</template>
3

This part isn’t necessarily the problem, setting and getting the key/value, it’s trying to actually trigger the function of the array that’s supposed to be inside the ReactiveDict. I think it’s because of the single quote around the name of the dictionary name that’s causing the problem.

// ####################################
// ###  Normal ReactiveDict Getter  ###
// ####################################

template.search = new ReactiveDict();
template.search.set('category_one');

const array = template.search.get('category_one');

// #############################################
// ###  My (automated?) ReactiveDict Getter  ###
// #############################################
template.search = new ReactiveDict();
template.search.set('category_one');

const array = template.search.get(category_clicked);
4

Ok, sorry. So you set a reactive dict in your code, but I don’t see anything that is actually tracking reactivity, like an autorun. What do you expect to happen when you change the values of your reactive dict?