Binding - помогите разобраться
 

Здравствуйте!

Пробую написать виджет для Django-вского поля ввода (chain select c заполнением списков с помощью REST-запросов), использую MooTools.

Вот такой HTML генерирует Django-вский виджет на стороне сервера:

<select name="location_city" id="id_location_city">
  <option value="0" selected="selected">---</option>
  <option value="1">Львів</option>
  <option value="2">Трускавець</option>
  <option value="3">Добротвір</option>
  <option value="4">Стебник</option>
  <option value="6">Дрогобич</option>
</select>
<select name="location_street" id="id_location_street">
  <option value="0" selected="selected">---</option>
</select>
  <select name="location_building" id="id_location_building">
<option value="0" selected="selected">---</option>
</select>
<select name="location_location" id="id_location_location">
  <option value="0" selected="selected">---</option>
</select>

Вот такой я пишу код на JS (для краткости не все списки обвешаны событиями):

var LocationEditor = new Class({

    initialize: function(name) {
        this.widgetName = name;
        this.citySelect = $('id_' + name + '_city');
        this.citySelect.addEvent('change', this.reloadStreetSelect.bind(this));
        this.streetSelect = $('id_' + name + '_street');
        this.streetSelect.addEvent('change', this.reloadBuildingSelect.bind(this));
    },

    reloadStreetSelect: function(e) {
        this.getSelect('street', e.target.value);
        this.streetSelect.fireEvent('change');
    },

    reloadBuildingSelect: function(e) {
        this.getSelect('building', e.target.value);
    },

    getSelect: function(part, parent_id) {
        var json_field_name = {
            city: 'name',
            street: 'full_name',
            building: 'number',
            location: 'name'
        };

        var req = new Request.JSON({
            method: 'get',
            url: '/locations/json/' + part + 's/' + parent_id + '/',
            onSuccess: function(resp) {
                var sel = $('id_' + this.widgetName + '_' + part);
                sel.empty();
                resp.each(function(item) {
                    var opt = new Element('option', {'value': item.id, 'html': eval('item.' + json_field_name[part])});
                    opt.inject(sel);
                });
            },
            onFailure: function(resp, text) {
                alert(text);
            }
        }).send();
    }
});

this.getSelect() - универсальная функция для выполнения REST-запросов. И с ней проблема, когда я ее вызываю из метода reloadStreetSelect она не работает.

var sel = $('id_' + this.widgetName + '_' + part);

Вполне понятно this здесь не тот и атрибут widgetName не определен.

Я пробовал вариант с передачей widgetName через параметр this.getSelect() - работает, но не красиво. А я не понимаю как это все забиндить так чтобы this в указанной строке соответсвовал обекту.

Спасибо за помощь!

Рискну предположить,что

onSuccess: function(resp) {
                var sel = $('id_' + this.widgetName + '_' + part);
                sel.empty();
                resp.each(function(item) {
                    var opt = new Element('option', {'value': item.id, 'html': eval('item.' + json_field_name[part])});
                    opt.inject(sel);
                });
            }.bind(this)

либо сохранить контекст

getSelect: function(part, parent_id) {
       var self = this;
       // код

        var req = new Request.JSON({
            method: 'get',
            url: '/locations/json/' + part + 's/' + parent_id + '/',
            onSuccess: function(resp) {
                var sel = $('id_' + self.widgetName + '_' + part);
                sel.empty();
                resp.each(function(item) {
                    var opt = new Element('option', {'value': item.id, 'html': eval('item.' + json_field_name[part])});
                    opt.inject(sel);
                });
            },
            onFailure: function(resp, text) {
                alert(text);
            }
        }).send();
    }