会话变量在 Meteor 中更新 DOM 的速度不够快

Question

我注意到 Session vars 的这个属性：

test.html

<input name='test' type='text' placeholder='something' value='{{testVal}}'>

test.js (template.test.helpers)

  testVal: function(){
    return Session.get("testVal");
  }

template.test.onRendered

// Sets the initial value of the session var and the form shows "I like cats"

Session.set("testVal", "I like cats");

var displayValue = function(newInput){
    Session.set("testVal", newInput);
    console.log("session has been set to: ", newInput);
    console.log("value of form entry using jQuery: ", $('input[name="test"]').val());
};

当我在 Chrome 控制台中运行 displayValue("lalalalal") 时，我得到：

"session has been set to: lalalalal"
"value of form entry using jQuery: I like cats."

文本输入的值确实在为会话变量设置新值后在视觉上反应性地更改为“lalalalal”，但似乎会话变量的 DOM 更新不够快- jQuery 仍然会在响应式更改之前获取旧值，这意味着 Session Vars 对 DOM 的响应式更新是异步的。

因此，这意味着如果您使用反应变量来自动更新表单字段并且您使用 jQuery 来获取表单值，那么您需要通过某种方式等到 DOM 完全更新后才能使用 jQuery。

有没有人知道有什么方法可以做到这一点，最好是在这个例子的上下文中？

Answer 1

在这个特定示例中，为什么不直接使用您设置 Session 变量的值，即 newInput ？

您的代码的问题是客户端上的反应式编程本质上是异步的：当您将 Session 变量设置为新值时，您正在使负责设置值的助手中的反应式计算无效模板标记内的 DOM 输入。

您可以使用Tracker.afterFlush 让响应式计算失效传播并重新运行帮助程序，从而真正更改您可以使用 jQuery 获取的输入值。

var displayValue = function(newInput){
  Session.set("testVal", newInput);
  console.log("session has been set to: ", newInput);
  Tracker.afterFlush(function(){
    var testValue = $('input[name="test"]').val();
    console.log("value of form entry using jQuery: ", testValue);
  });
};