javascript - meteor :强制渲染元素

Question

我有一个在我的应用中多次使用的通用模板:

<template name="genericCollapse">
  {{data-1}}
  <a href=# class='collapsed' data-toggle='collapse'
     data-target='#uniqueId'>Show/hide data-2</a>
  <div class='collapse' id='uniqueId'>
    {{data-2}}
  </div>
</template>

通过点击应用中的其他位置，data-1 和 data-2 会同时更改(使用 session 变量)。但是，如果模板已经在屏幕上，则只有 data-1 和 data-2 发生变化，但 div 的折叠状态保持(显然)不变。如果它之前是打开的，它将保持打开状态。

我想实现的是，每当 data-1/data-2 发生变化时，div 和 a 都被迫再次处于折叠状态。我尝试添加

<a href=# class='{{collapsed}}'

Template.genericCollapse.helpers({
  collapsed () {return "collapsed " + Random.Id()},
})

这不仅非常丑陋而且无济于事，因为 div 的类仍然是“折叠显示”，即使有第二个 div 助手，我也无法摆脱“显示”。

重新渲染整个模板也是可以接受的，但是我很难确定调用 Blaze.render() 的父节点——它永远不一样——而且我也不确定在哪里正确地进行这样的调用.

这是怎么做到的？

Answer 1

看来您正在与 Bootstrap 作斗争。 show 类是在您单击链接时由 Bootstrap 添加的，对吗​​？因为此类不是由您的 html 标记设置的，所以您需要在基础数据更改时自行删除它。您可以通过观察数据的变化然后直接修改 DOM 来实现。

这是一个基本的例子:

Template.myTemplate.onCreated(function () {
  const query = MyCollection.find({},{fields: {data-1: 1, data-2: 1}});
  const handle = query.observeChanges({
    changed(id, fields) {
      $('.show').removeClass('show');
    }
});

这假设有一个集合，其中包含您要控制的字段 data-1 和 data-2。如果您的 data-1 和 data-2 是执行某些计算的助手，那么您可能希望使用基于响应式(Reactive)的 Tracker 来解决这个问题变量代替。