Убрать ошибку когда скрывается выпадающее меню backbone?

Question

[ODY]

нужно скрывать выпадающее меню по клику на document.

events: {
			'click': function() {
				this.countriesDropDownListView.toggleList();
			}
		},

toggleList: function() {
			this.$el.toggle();
			$(document).one('click', function() {this.$el.toggle()});
		}

Вся эта штука вообще работает, но вываливает такую ошибку:

Cannot read property 'toggle' of undefined

Также я не сильно уверен в правильности такого подхода, если будут рекомендации - выслушаю.

Answer 1

[Сергей Мельников]

toggleList: function() {
  var el = this.$el;
  el.toggle();
  $(document).one('click', function() {
    el.toggle();
  });
}

Answer 2

[Константин Китманов]

Проблема в том, что хендлер клика по документу выполняется в контексте элемента, на который он навешен, как это принято в jQuery (а не в контексте вьюхи, как это принято в бэкбоне).
Решение либо как у Сергей Мельников, либо использовать Function#bind:

toggleList: function() {
  this.$el.toggle();
  $(document).one('click', function() {
    this.$el.toggle();
  }.bind(this)); // или _.bind(function () {...}, this), если нужна поддержка IE8 
}

P.S. или вообще так:

$(document).one('click', this.$el.toggle.bind(this.$el))

Answer 3

[ODY]

Спасибо за ответы, действительно оба ответа верны, но все же оставлю код на котором остановился

toggleList: function(e) {
			e.stopPropagation();
			this.$el.toggle();
			$(document).one('click', function() {this.$el.hide();}.bind(this));
		}

Обращаю внимание на строку e.stopPropagation();, без нее первый клик(.one) проходил немедленно после объявления.

events: {
      'click': function(e) {
        this.countriesDropDownListView.toggleList(e);
      }
    }