reactive programming - Meteor: Pause reactivity on UI element -
i using meteor reactive framework allow user edit text box in web gui, update database on changes on text box, , update textbox updates database.
this creates dependency loop, , when type fast, latency between updates destroys text written user.
my thought of how alleviate temporarily pause updates database object user has focused on.
i have tried numerous ways this. here template:
<template name="valueeditor"> <div class="list-item {{editingclass}}"> <input type="text" value="{{value}}" placeholder="value"> </div> </template>
here helpers:
template.valueeditor.helpers({ value : function(){ var state = ! session.equals(editing_key, this._id); console.log("reactive state = " + state) var result = objects.find({_id:this._id},{reactive:state}).fetch()[0].value; console.log("database emitting '" + result + "'back ui input!!!") return result; });
here events:
template.valueeditor.events({ 'keydown input[type=text]': function(event) { console.log("you've pressed = " + string.fromcharcode(event.which)); if (event.which === 27 || event.which === 13) { event.preventdefault(); event.target.blur(); } }, 'keyup input[type=text]': _.throttle(function(event) { console.log("saving '" + event.target.value + "' database."); objects.update(this._id, {$set: {value: event.target.value}}); }, 300) )};
here output (when type fast):
"you've pressed = t" "you've pressed = e" "you've pressed = s" "saving 'tes' database." "you've pressed = t" "you've pressed = i" "reactive state = false" "database emitting 'tes'back ui input!!!" "you've pressed = n" "saving 'tesn' database." "you've pressed = g" "you've pressed = " "reactive state = false" "database emitting 'tesn'back ui input!!!" "saving 'tesn' database."
how can make database doesn't overwrite text intended type in input box???
i found out element stop updating database sending html element what's in html element when user editing it. here's code:
template.objecttemplate.events({ 'focus input[type=text]': function(event) { session.set(editing_value, event.target.value); session.set(editing_key, this._id); }, 'blur input[type=text]': function(event){ if (session.equals(editing_key, this._id)) { session.set(editing_key, null); session.set(editing_value, ""); } }, 'keydown input[type=text]': function(event) { if (event.which === 27 || event.which === 13) { event.preventdefault(); event.target.blur(); } }, 'keyup input[type=text]': _.throttle(function(event) { objects.update(this._id, {$set: {value: event.target.value}}); }, 300), }); template.objecttemplate.helpers({ value : function(){ var x; if (session.equals(editing_key, this._id)) x = session.get(editing_value); else x = this.value; return x }