在 DOM 被反应式模板数据更改后，Meteor 调用 JS

Meteor call JS after DOM changed by reactive template data

本文关键字：Meteor JS 调用 数据 DOM 反应式      更新时间：2023-09-26

我试图在一个更大的项目中想办法解决这个问题，但把这个小例子放在一起，希望找到一个解决方案。

该示例是通过创建一个新的 meteor 项目（使用 meteor 1.0.3.1）并添加 mizzao：bootstrap-3 并使用以下文件来组合的：

测试.html

<head>
  <title>test</title>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      {{> example}}
    </div>
    {{> controls}}
  </div>
</body>
<template name="example">
  <div class="col-xs-{{zoom}}">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><span data-toggle="tooltip" data-placement="auto" title="Some text that will appear in the tooltip (which should be centered above or below this span) when hovering over the this span">Text that can spill out</span></h3>
      </div>
      <div class="panel-body">
        <p>Foo</p>
      </div>
    </div>
  </div>
</template>
<template name="controls">
  <button id="in">+</button>
  <button id="out">-</button>
</template>

测试.css

.panel-title > span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-title div.tooltip {
  white-space: initial;
}

测试.js

if (Meteor.isClient) {
  var minZoom = 1;
  var maxZoom = 4;
  Session.setDefault('zoom', 4);
  Template.example.helpers({
    zoom: function () {
      return Session.get('zoom');
    }
  });
  Template.controls.events({
    'click button': function(event) {
      switch(event.currentTarget.id) {
        case 'in':
          if (Session.get('zoom') < maxZoom)
            Session.set('zoom', Session.get('zoom') + 1);
          break;
        case 'out':
          if (Session.get('zoom') > minZoom)
            Session.set('zoom', Session.get('zoom') - 1);
          break;
      }
    }
  })
  test = function() {
    $('.panel-heading').each(function(index) {
      var h3 = $(this).find('h3');
      var span = $(this).find('span');
      span.width('initial');
      if (span.width() > h3.width()) {
        span.width('100%');
      }
    });
    $('[data-toggle="tooltip"]').tooltip();
  }
  Template.example.rendered = function() {
    test();
  }
}
希望很清楚（ish）我试图实现的是，当跨度超过h3的宽度时，

跨度（悬停时切换到工具提示）设置为与h3相同的宽度 - 或者如果h3更大，那么跨度设置为默认值（内联/初始宽度）。这样做的原因是，在初始化工具提示时，工具提示应显示在范围文本的上方（或下方）居中。渲染模板时对 test（） 的调用按预期工作（您可以更改"缩放"会话的默认值以更改首次加载页面时面板的宽度 - 我一直在使用 1 和 4 进行测试。但是，当 DOM 由于单击 + 或 - 按钮时发生的反应式会话变量"缩放"更改而更新时，我需要调用 test（）。发生这种情况时，面板类 col-md-# 会更改，其中 # 是缩放会话变量的值。

总而言之，DOM 发生了变化，但这不是为了响应我直接进行的 JavaScript 调用，也不是由于订阅的数据发生了变化，所以我不相信我可以使用 Tracker.afterFlush 回调。由于缩放助手必须在 DOM 更新之前返回，因此我看不到调用由任何特定事件触发的"test（）"的方法，并且在单击按钮中添加一些内容会过早发生 有人有任何想法吗？

同样从我所读到的内容来看，突变观察者还没有得到广泛的支持，所以这可能不是一种选择。

谢谢

如果我

做对了，你实际上是在更改会话变量，并希望在它改变时有一个回调？如果这是正确的，那么每次变量更改时，将该变量包装在自动运行函数中都会执行它。

此外，如果仍然存在赛车问题，您可以在调用 test（） 之前使用带有小延迟的 setTimeout。

Tracker.autorun(function () {
  Session.get('zoom');
  test();
});

这是我在流星论坛上发帖后无耻的回答。

在进行更改以导致反应性更改后，请将 javascript 放在Tracker.afterFlush回调中。

http://docs.meteor.com/#/full/tracker_afterflush

相关文章：