Как я могу объединить Google Maps и Infobox на основе Backbone View - PullRequest
Новая
       8

Как я могу объединить Google Maps и Infobox на основе Backbone View

4 голосов
/ 25 февраля 2012

Я хотел бы иметь карту Google, которая при нажатии на маркер откроет информационное окно (или пользовательское наложение), которое фактически (или основано) на Backbone View. Магистральное представление должно получать свое содержимое, выполняя вызов ajax при первом его открытии, но если оно закрыто и повторно открыто, оно не должно делать еще один вызов серверу (должен отображаться результат первого открытия)

Я просто понятия не имею, как это реализовать, поскольку содержимое информационного блока является элементом dom (который я хочу изменить / заполнить только при первом его открытии). (кстати, я в основном бэкэнд-разработчик, интерфейс для меня очень новый)

Я думал о том, чтобы сделать что-то похожее на это, но я не уверен, что это правильный путь: 

var view = new MyOverlayBackboneView({ model: myModel});
var infoBoxOptions = {
   content: view.el
};



var infoBox = new InfoBox(infoBoxOptions);

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(some_lat, some_lng),
    ...
    other marker related parameters
});

marker.infoBox = infoBox;

google.maps.event.addListener(marker, 'click', function() {
    this.infoBox.open(map, this);
}

Что мне здесь не хватает, и я немного меньше понимаю, что делать, так это часть render () Backbone View при первом открытии инфобокса.

Само собой разумеется, я хочу, чтобы часть кода, которая инициирует информационный блок, была максимально чистой и оставляла любые стили и ajax-вызовы для представления основы.

Буду признателен, если кто-нибудь укажет мне правильное направление (учебник / пример кода). Заранее благодарим за любую помощь, которую вы предоставляете.

1 Ответ

1 голос
/ 26 февраля 2012

Ваш взгляд может выглядеть примерно так: 

MyOverlayBackboneView = Backbone.View.extend({
  render: function() {
    [rendering the contents of your view here]
    return this;
  }
};

А затем при создании вашего информационного окна: 

var infoBoxOptions = {
  content: view.render().el
};

Это позволит вашему представлению визуализироваться только один раз, а затем поместить содержимое, отображенное в InfoBox.

...