I am trying to get my backbone view, that represents an infoWindow, to respond to a click event.
App.InfoWindowView = Backbone.View.extend({
events: {
"click a": "clickInfoWindow" // fires when any <a> tag in this view is clicked
}
Unfortunately, the only way the click event callback works correctly is by setting the content of the infoWindow to a jQuery object, setting the content to HTML text causes the event to not fire correctly.
createInfoWindow: function(){
this.$el.html(
window.JST['map-article-infowindow-content'](
{
articleData : articleData
})
);
this.infoWindow.setContent(this.$el[0]); // set content to the jQuery object
}
clickInfoWindow: function() // passing an eventObject to this function doesn't fix this
{
this.ref = window.open(this.model.get("link"), '_blank', 'location=yes');
return false;
}
A jQuery object for content works well, except that the infoWindow doesn't size correctly --
Setting the content to HTML text directly causes the infoWindow to size correctly, but the backbone events don't fire.
So either I need to:
- Get the backbone events firing on tags using HTML text
or
- Get the infoWindow sizing correctly with a jQuery object as content
Edit: CSS for infoWindow image:
.gm-style-iw img.articleImg{
float:left;
width:30%;
height:auto;
padding-bottom:25px;
padding-right:5%;
}
It looks like the infowindow autosizing doesn't respond well to images of variable size.
I have reduced the size of my image, instead of basing it on a percentage of the infoWindow's width.
New image CSS:
and this mostly works, as it makes most of the images small enough to fit in the infoWindow.
If anyone knows why infoWindows don't react well with height:auto, or images of variable size, I would be interested to know.