流星-尝试使用数据属性和ReactiveDict实现自动化

Question

[我正在尝试使用于反应式字典的命名约定自动化，但是我仍然不知道如何基于单击时获取的数据属性来访问反应式字典键。

Expected：对HTML元素上的ReactiveDict键和数据属性名称使用相同的命名约定，因此我可以获取所单击元素的名称，获取其数据属性名称，并自动知道这是哪个ReactiveDict键，因为他们使用相同的名称。

Result：尝试设置ReactiveDict或从ReactiveDict获取命名约定时，它无法识别，因为...我不知道。我猜是因为当您创建ReactiveDict时，您使用了此约定template.search.set（'generic_name'，data），但是如果我将'generic_name'替换为数据属性名称（那不会， t上包含单引号）。

请参见下面的示例代码，并建议您是否有任何疑问，要求更多信息或开玩笑，因为我们都被困在家里，避免了COVID-19病毒：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.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);
    },
});

谢谢！

Answer 1

您的数据键正在工作，您实际上在这里设置了数据：

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之后，将立即在帮助器中更新数据。