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   } 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -