Why doesn't binding from callback work?

Question

JavaScript

define(['underscore', 'libs/backbone', 'backbone.epoxy'],
  function(_, Backbone, epoxy) {

    var PanelSlider = Backbone.Epoxy.View.extend({

      id: "PanelSlider",
      className: "panel hide",

      bindings: {
        "select.theme": "value:theme, events:['change']",
                "input.title": "value:title,events:['keyup']",
                "input.min_value": "value:min_value,events:['keyup']",
                "input.max_value": "value:max_value,events:['keyup']",
                "input.default_value": "value:default_value,events:['keyup']",
                "input.slider_step": "value:slider_step,events:['keyup']",
                "input.slider_calibre": "value:slider_calibre,events:['keyup']",
                "select.object": "value:object, events:['change']",
                "select.field": "value:field, events:['change']"
      },

      initialize: function() {
        this.render();
      },

      render: function() {

        var session_id = getURLParameter('session_id');
        var self = this;

        if (session_id) {

          $.ajax({
            type: "GET",
            url: "/api/objects/",
            data: {
              'session_id': session_id
            },
            success: function (response) {

              var fields = ['pie', 'line', 'spline', 'area'];
              var themes = ['ClearBlue', 'ClearMozaic', 'ClearGreen', 'ClearGrey', 'ClearOrange', 'ClearRed', 'DottedBlue', 'DottedMozaic', 'DottedGreen', 'DottedGrey', 'DottedOrange', 'DottedRed', 'RoundedBlue', 'RoundedMozaic', 'RoundedGreen', 'RoundedGrey', 'RoundedOrange', 'RoundedRed', 'SquareBlue', 'SquareMozaic', 'SquareGreen', 'SquareGrey', 'SquareOrange', 'SquareRed'];
              var compiledTemplate = JST["tantaman.web.widgets/PanelSlider"]({ themes: themes, objects: response, fields: fields });
              self.$el.html(compiledTemplate);


            },
            error: function (response) {
              console.log("Failed!!!11", response);
            }
          });

        }


      }

    });

    return PanelSlider;

  });

If you do this.$el.html(compiledTemplate); just from the render() method, then everything works. But it is necessary to load the data from the server. You could probably try a synchronous ajax function, but would like to understand.

Answer 1

Because event handlers are assigned immediately after the render function is executed, and you edit the DOM after it is executed.
I would do like this:

define(['underscore', 'libs/backbone', 'backbone.epoxy'],
    function (_, Backbone, epoxy) {

        var PanelSlider = Backbone.Epoxy.View.extend({

            id: "PanelSlider",
            className: "panel hide",
            template: JST["tantaman.web.widgets/PanelSlider"],

            fields: ['pie', 'line', 'spline', 'area'],
            themes: ['ClearBlue', 'ClearMozaic', 'ClearGreen', 'ClearGrey', 'ClearOrange', 'ClearRed', 'DottedBlue', 'DottedMozaic', 'DottedGreen', 'DottedGrey', 'DottedOrange', 'DottedRed', 'RoundedBlue', 'RoundedMozaic', 'RoundedGreen', 'RoundedGrey', 'RoundedOrange', 'RoundedRed', 'SquareBlue', 'SquareMozaic', 'SquareGreen', 'SquareGrey', 'SquareOrange', 'SquareRed'],
            objects: {},

            bindings: {
                "select.theme": "value:theme, events:['change']",
                "input.title": "value:title,events:['keyup']",
                "input.min_value": "value:min_value,events:['keyup']",
                "input.max_value": "value:max_value,events:['keyup']",
                "input.default_value": "value:default_value,events:['keyup']",
                "input.slider_step": "value:slider_step,events:['keyup']",
                "input.slider_calibre": "value:slider_calibre,events:['keyup']",
                "select.object": "value:object, events:['change']",
                "select.field": "value:field, events:['change']"
            },

            initialize: function () {
                var session_id = getURLParameter('session_id');

                if (session_id) {

                    $.ajax({
                        type: "GET",
                        url: "/api/objects/",
                        data: {
                            'session_id': session_id
                        },
                        success: _.bind(function (response) {
                            this.objects = response;
                            this.render();
                        }, this),
                        error: function (response) {
                            console.log("Failed!!!11", response);
                        }
                    });

                }
            },

            render: function () {
                this.$el.html(this.template({themes: this.themes, objects: this.objects, fields: this.fields}));
                return this;
            }

        });

        return PanelSlider;

    });