Blend custom Google Maps overlays with Backbone Views

Question

TL DR

Is PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype) "correct" way to inherit Backbone View inherited from another "class"?

Long read

We are redesigning our site using Backbone and are working to enable some display features.

I have a Backbone view that handles placing a <div> at specific points in a browser window; this seems like a natural continuation for the Google Map API to place them in geographic coordinates.

According to the Google API , in order to create a custom overlay, you create a new object and set the prototype for this object in a new instance of google.maps.OverlayView. Then you implement three functions on top of this object so that the object responds to:

onAdd

draw

onRemove

Where onAdd is responsible for creating the HTML and then applying it on top of the Map. Then it calls draw , which correctly positions the element according to the LatLng pairs and constraints that you provided. onRemove is called when you want to get rid of your layer.

So, I changed my view to include these three methods (which are simply called render and unrender and are tied to my collection). And then, to do the “magic”, I do:

PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype)

Does this look right? I can publish the code for the View and Model on which it is based, but to be honest, they are not related to this example - the code works, and I can place a custom div generated using the Backbone model, view and the component controller on the map without of the problems I'm asking about, I think (and maybe this question is more suitable for .se programmers, so let me know and I will translate it).

This is probably the easiest way to make my PinView both Backbone View and OverlayView Google Maps, but I'm not 100% comfortable with prototype inheritance to know that I'm doing something “wrong” or something broke on the way .

Answer 1

A good idea! I, as a rule, am a little skeptical about the weather or not, you are “right” when everything works, if you did not encounter a show show, and overlays overlap and do what should have been done, I would say that you are.

One thing to check closer though:

This cannot (and cannot) be “real” multiple inheritance - this concept is not very relevant in a prototype-based language: one implementation of the method will inevitably “win” and overwrite the other implementation, when using _.extend()

This means that if the Backbone.View and google.maps.OverlayView tags have members or methods with the same name, the last of your _.extend() calls will be the one that takes over. But when I test them using the Chrome developer tools, I did not see any obvious collisions of this kind.

So my recommendation: keep using it, just try a lot. I would like to see an example of this technique for a while.

Answer 2

Oh! So I did it, but he never felt good.

Then I found this discussion in the Backbone group , which leads me to the following:

 var MyView = (function(){ var view = function(){ Backbone.View.apply(this, arguments); }; view.extend = Backbone.View.extend; _.extend(view.prototype, Backbone.View.prototype, google.maps.OverlayView.prototype, [other prototypes...], { [VIEW DEFINITION] }); return view; }()); 

Thus, if we need to redefine any of the definitions in the class, we extend ing from, we can, since it is earlier in the _.extend chain (later definitions overwrite earlier definitions).

I am working on the extension extension to track the “parent” references to objects that will be overridden and provide a method for calling them (for example, calling Python super ). I have not decided whether to do this with the monkey fix, the interceptor pattern (via the _.tap() underscore method, or something else, but I think this will add a lot of flexibility.

This will allow you to define the initialize view in your "parent" class, which you can call by doing something like _.super('ParentClass', 'initialize'); at the end of the "child" class initialize ...