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仍然会在响应式更改之前获取旧值，这意味着会话变量的DOM的反应性更新是异步的。

因此，这意味着如果您使用反应变量来自动更新表单字段，并且您正在使用jQuery然后获取表单值，则需要一些方法等待DOM完全更新，然后才能使用jQuery。

有没有人知道如何做到这一点，理想情况是在这个例子的上下文中？

Answer 1

在这个特定示例中，为什么不使用您设置Session var的值，即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);
  });
};

Sessions vars在Meteor中没有足够快地更新DOM

1 个答案: