Сессии VARS не обновляя DOM достаточно быстро в Метеоре

Question

Я заметил это свойство сессии вары:

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()); 
}; 

Когда я бегу displayValue("lalalalal") в Chrome консоли я получаю:

"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); 
    }); 
};