Почему не работает биндинг из коллбэка?

Question

[yarikus]

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;

	});

Если делать this.$el.html(compiledTemplate); просто из метода render(), то все работает. Но нужно данные с сервера подгружать. Можно, наверное, попробовать синхронную функцию ajax, но хотелось бы понять.

Answer 1

[Василий Останин]

Потому что, event handler'ы присваиваются сразу после выполнения функции render, а Вы редактируете DOM после ее выполнения.

Я бы сделал так:

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;

    });