Question

此Meteor客户端代码接收用户输入keyup .check-filter并更改会话itemsList中的对象数组，该会话用于向模板帮助程序提供其数据。
代码更改了与{c}类匹配的{{this.class}}数据以设置列表项的样式当代码将类添加到会话中的数据时，浏览器会响应OK。如果代码从所述数据中删除了类，则浏览器会响应OK，但是当该类再次添加到同一项时，即使控制台日志检查到底层数据存在，浏览器也不会通过添加类来响应。
我知道浏览器在检查浏览器元素选项卡后没有添加该类。

然而，当代码将类添加到另一个项目然后将其删除并将类添加到之前不起作用的第一个项目时，则第一个项目再次起作用。

知道为什么会发生这种情况以及如何解决这个问题？感谢

Template.checks.helpers({
  'values': function() {
    let result = [];
    let checks = Session.get('itemsList'); //<--- array of objects
    checks.forEach((item) => {
      if (some condition) {
        result.push({
          label: item.name,
          class: item.class,
          key: item.key,
          image: utility.getUrlForImageLabel(item.name)
        });
      } else {
        result.push({
          label: item.name,
          class: item.class,
          image: utility.getUrlForImageLabel(item.name)
        });
      }
    });
    console.log(result); //<--- confirms data inclusion.
    return result;
  }
});

Template.checks.events({
  'keyup .check-filter': function(event) {

    //build the array of objects and stores in the session 'itemsList'
    utility.checksFiltering(event.target.value);
  }
});

<template name="checks">
  <form>
    <div class="list-item">
      <input class="check-filter" type="text" placeholder="Start typing, fast find">
    </div>

    <div class="list-item">
      {{#each values}}
      <ul class="checks-row" data-key={{this.key}}>
        <li class="check-image {{this.image}}">
          <img src="/{{this.image}}">
        </li>
        <li class="check-label {{this.class}}">{{this.label}}</li> //<------ problem element
      </ul>
      {{/each}}
    </div>
  </form>
</template>

基于会话的模板助手，无法更新

0 个答案: