Avoid creating an on change loop

Question

So, the problem is the following. When typing into one of the editors, the change gets submitted to firebase, where the change is registered and the change is then input back(?) into the editor, creating a loop.

How could one go by avoiding this.

The code in question is the following:

tmpltr.editors.data.getSession().on('change', function() {
    collabjs.set(tmpltr.editors.data.getSession().getValue());
});
tmpltr.editors.structure.getSession().on('change', function() {
    collabhtml.set(tmpltr.editors.structure.getSession().getValue());
});
tmpltr.editors.style.getSession().on('change', function() {
    collabcss.set(tmpltr.editors.style.getSession().getValue());
});
collabjs.on('value', function(snapshot) {
    tmpltr.fn.setData(snapshot.val());
    tmpltr.fn.renderOutput("html");
    tmpltr.editors.data.session.setValue(snapshot.val());
});
collabcss.on('value', function(snapshot) {
    tmpltr.fn.setStyle(snapshot.val());
    tmpltr.fn.renderOutput("style");
    tmpltr.editors.style.session.setValue(snapshot.val());
});
collabhtml.on('value', function(snapshot) {
    tmpltr.fn.setStructure(snapshot.val());
    tmpltr.fn.renderOutput("html");
    tmpltr.editors.structure.session.setValue(snapshot.val());
});

Answer 1

It's not possible to call set on both paths for every change without creating a loop. This is by definition, a loop.

One solution would be to disable the on('value', ...) events while the user is typing into the field. Another solution would be to only call set from tmpltr.editors after the user leaves the field, or after a save button is clicked (instead of for each change).

var isTyping = false;
tmpltr.editors.data.getSession().on('focus', function() {
   isTyping = true;
});
tmpltr.editors.data.getSession().on('blur', function() {
   isTyping = false;
});

collabjs.on('value', function(snap) {
   if( !isTyping ) {
      tmpltr.fn.setData(snapshot.val());
      tmpltr.fn.renderOutput("html");
      tmpltr.editors.data.session.setValue(snapshot.val());
   }
});

/* and so on... */

If you are attempting to create a collaborative editor where multiple users can type simultaneously, check out FirePad for an example, which is a drop-in Firebase tool for collaborative editing.