Idea for improving schema field "watch"

Currently the “watch” functionality is rather limited when used from within schema options. (Using the on(‘watch’) from JavaScript offers much more flexibility) and the field watching is always readonly.

In the develop/2.x branch I introduced a callback list for including JavaScript function callbacks in schema options. (Originally created for 3rd-party plugins that uses callback functions as options)

The same callback list functionality could be used for “watch” fields. So instead of setting a “template” parameter, you set a “watchfunc” So if the “template” parameter matches a callback function in the callback list it will use the callback function as “template”. The callback function receives the values of the watched field (similar to templates) but can manipulate the data much more freely.

Test case:

• Field1 is a textinput for entering firstname
• Field2 is a radio input with 2 options (male and female) and is watching for changes in Field1

When Field1 loses focus, the watch event is triggered in Field2. this passes the value of Field1 to the “watchfunc”, which then does an API lookup at https://api.genderize.io, and sets the Field2 value based on the result. And as the field is not readonly, the user can change it manually too.

The changes needed for this to work, is very minimal since the callback list code is already present in develop/2.x

Current code in editors/string.js

    // Compile and store the template
    if(this.schema.template) {
      this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine);
      this.refreshValue();
    }
    else {
      this.refreshValue();
    }

After patching code in editors/string.js

    // Compile and store the template
    if(this.schema.template) {
      var callback = this.expandCallbacks('watch', {template: this.schema.template});
      if (typeof callback.template === 'function') this.template = callback.template;
      else this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine);
      this.refreshValue();
    }
    else {
      this.refreshValue();
    }

And a callback watch function would be defined like this (callback is named “hello”)

window.JSONEditor.defaults.callbacks.watch = {
  "hello": function(jseditor,e) {
    var watched = e.colors;
    return watched ? 'The color is ' + watched : '';
  }
};

@schmunk42 @germanbisurgi @lukzas @mirannda What do you think of this idea?

[pmk65]

If there’s no objections to this change, I will implement it in the develop/2.x branch There’s only 2 editors with watch/template support. string.js (plus all that extends string.js) and hidden.js so it’s a really minor change.

IMO the use of template engines (like Mustache, Swig, Lodash etc.) is totally overkill. No one seems to really use it and just sticks to the default/build-in template engine. The only one I could get to work/figure out, was Handlebars. See demo here

(I have asked for people to post examples using the template engines, but zero response.)

[pmk65]

Functionality added to develop/2.x branch