Метеор - Попытка автоматизации с использованием атрибутов данных и ReactiveDict - PullRequest
Новая
       16

Метеор - Попытка автоматизации с использованием атрибутов данных и ReactiveDict

0 голосов
/ 10 апреля 2020

Я пытаюсь автоматизировать соглашения об именах, используемые для реактивного словаря, но я не знаю, как получить доступ к ключу реактивного словаря на основе атрибута данных, который я выбрал при клике.

Ожидаемый : использовать одно и то же соглашение об именах как для ключей ReactiveDict, так и для имен атрибутов данных в элементах HTML, чтобы я мог получить имя для выбранного элемента, взять его имя атрибута данных и автоматически узнать, какой это ключ ReactiveDict, потому что они используйте одно и то же имя.

Результат : при попытке установить или получить данные из ReactiveDict не распознается соглашение об именах, потому что ... я не знаю. Я предполагаю, что это потому, что когда вы создаете ReactiveDict, вы используете это соглашение template.search.set ('generic_name', data), но это не сработает, если я заменю 'generic_name' на имя атрибута данных (которое не '). не включает в себя одинарные кавычки)

Пожалуйста, посмотрите пример кода ниже и сообщите, если у вас есть какие-либо вопросы, запрос дополнительной информации или смешные шутки, поскольку мы все попали в ловушку дома, избегая вируса COVID-19 : small_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.helpers({
    formatToNumberWithComma(number) {
        return format_w_comma(number);
    },
    category_one() {
        const template = Template.instance();
        return template.search.get('category_one')[0].data;
    },
    category_two() {
        const template = Template.instance();
        return template.search.get('category_two')[0].data;
    },
    category_three() {
        const template = Template.instance();
        return template.search.get('category_three')[0].data;
    },
    get_this(option) {
        const query_to_array = [];
        const search_query_word_array = option.value.split(' ');
        const search_query_word_array_count = search_query_word_array.length;

        for (let i = 0; i < search_query_word_array_count; i++) {
            query_to_array[i] = `${search_query_word_array[i]}`;
        }

        const search_query = query_to_array.join('-');
        return search_query;
    },
});

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);
    },
});

Спасибо!

1 Ответ

0 голосов
/ 13 апреля 2020

Ваши ключи данных работают, вы фактически задаете здесь данные: 

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)

Рассмотрите следующие данные: 

template.search.set('category_one', [
  {
    data: [
      {
        value: 'some value here',
        count: 100
      }
    ]
  }
])

и category_clicked равны category_one и filter_selected будет some value here, тогда приведенный выше код приведет к получению следующих данных: 

[
    {
      data: [
        {
          value: 'some value here',
          count: 100
        }
      ]
    },
    'some value here'
]

Я не уверен, как вы будете обрабатывать эти данные, но это показывает, что ваши реактивные данные работают. Данные обновляются в помощнике сразу после нажатия label.

...