Merge pull request #10785 from guerler/fix_state_handling

Improve update handling for switches, use es6 and listento functions

client/src/mvc/ui/ui-options.js

@@ -7,7 +7,6 @@ import Buttons from "mvc/ui/ui-buttons";
 
 var Base = Backbone.View.extend({
     initialize: function (options) {
-        var self = this;
         this.model =
             (options && options.model) ||
             new Backbone.Model({
@@ -19,14 +18,14 @@ var Base = Backbone.View.extend({
                 wait_text: "Please wait...",
                 multiple: false,
                 optional: false,
-                onchange: function () {},
+                onchange: () => {},
             }).set(options);
         this.listenTo(this.model, "change:value", this._changeValue, this);
         this.listenTo(this.model, "change:wait", this._changeWait, this);
         this.listenTo(this.model, "change:data", this._changeData, this);
         this.listenTo(this.model, "change:visible", this._changeVisible, this);
-        this.on("change", () => {
-            self.model.get("onchange")(self.value());
+        this.listenTo(this, "change", () => {
+            this.model.get("onchange")(this.value());
         });
         this.render();
     },

client/src/mvc/ui/ui-switch.js

@@ -8,11 +8,15 @@ export default Backbone.View.extend({
             new Backbone.Model({
                 disabled: false,
                 visible: true,
+                onchange: () => {},
             }).set(options);
         this.setElement(this._template());
         this.$label = this.$(".label");
         this.$input = this.$(".custom-control-input");
         this.listenTo(this.model, "change", this.render, this);
+        this.listenTo(this, "change", () => {
+            this.model.get("onchange")(this.value());
+        });
         this.render();
     },
     events: {
@@ -36,7 +40,7 @@ export default Backbone.View.extend({
     },
     _onchange: function () {
         this.value(this.$input.prop("checked") ? "true" : "false");
-        this.model.get("onchange") && this.model.get("onchange")(this.model.get("value"));
+        this.trigger("change");
     },
     _template: function () {
         const id = this.model.id;