CODEWITHSUNDEEP
javascriptjqueryhtmlbackbone.js
CognitiveDesire
CognitiveDesire

Reputation: 784

calling one function from another in backbone view Backbone.js

What I want is to call plotPort from plotLoc using this.plotPort(); but I am unable to... but if I use self.plotPort(); it does not work for IE. My workaround was to add event to lLoca upon reset to call plotPort. Why does not this.plotPort work?

var Loca = Backbone.Model.extend({latitude:{},longitude:{}});
        var LocaList = Backbone.Collection.extend({
            model : Loca,
            url : "/getLatLongList"
        });
        var PortList = Backbone.Collection.extend({
            model : Loca,
            url : "/getLatLongListForPort"
        });
        var lLoca = new LocaList;
        var lPort = new PortList;

        var CreateMap = Backbone.View.extend({

                    el : 'div',
                    map : {},
                    latitude : {},
                    longitude : {},             
                    initialize : function() {

                         var lOptions = {};                  
                    lOptions.success = this.plotLoc;
                        lLoca.fetch(lOptions,this);
                        lLoca.on('reset',this.plotPort(),this);
                        //_.bindAll(this,'plotPort');
                    },

                    plotLoc : function() {
                        // var test =lLoca.toJSON();
                        // $('#pchart').html(JSON.stringify(lLoca));

                        this.latitude = lLoca.toJSON()[0].latitude;
                        this.longitude = lLoca.toJSON()[0].longitude;
                        this.latlng = new google.maps.LatLng(this.latitude,
                                this.longitude);
                        var mapOptions = {
                            center : this.latlng,
                            zoom : 15,
                            mapTypeId : google.maps.MapTypeId.SATELLITE,
                            mapTypeControl : false,
                            streetViewControl : false,
                            navigationControlOptions : {
                                style : google.maps.NavigationControlStyle.SMALL
                            }
                        };
                        mapContainer = $("#mapContainer").get(0);
                        this.map = new google.maps.Map(mapContainer, mapOptions);

                        _.each(lLoca.models, function(loc) {
                            var marker = new google.maps.Marker({
                                position : new google.maps.LatLng(
                                        loc.toJSON().latitude,
                                        loc.toJSON().longitude),
                                map : this.map,
                                title : ""
                            });

                        }, this);
                        lLoca.reset();
                        //console.log(self+"");
                    //this.plotPort();
                    },
                    plotPort : function() {

                         lPort.fetch({                  
                         success: function() {
                             var postImage = new google.maps.MarkerImage(
                                        "Images/greenflag.png",
                                        new google.maps.Size(50, 50));
                                var marker = new google.maps.Marker({
                                    position : new google.maps.LatLng(
                                            lPort.toJSON()[0].latitude,
                                            lPort.toJSON()[0].longitude),
                                    map : this.map,
                                    icon : postImage,
                                    title : "From"

                                });
                                marker = new google.maps.Marker({
                                    position : new google.maps.LatLng(
                                            lPort.toJSON()[1].latitude,
                                            lPort.toJSON()[1].longitude),
                                    map : this.map,
                                    icon : postImage,
                                    title : "To"

                                });
                         }
                         });                        
                    },
                    render : function() {
                        return this;
                    }

                });
        var App = new CreateMap;

Upvotes: 0

Views: 3864

Answers (4)

bluecubetheshiny
bluecubetheshiny

Reputation: 1

inside an object , from one function calling another function, you could use jQuery proxy to pass in the correct "this"

instead of

    this.plotPort();

try

    $.proxy(function () { 
        this.plotPort(); 
    }, this);

Upvotes: 0

Cyclone
Cyclone

Reputation: 1580

What I can understand from your code, you should bind reset before doing fetch and also the binding is not proper it should be like this,

lLoca.on('reset', this.plotPort, this); // notice () being removed after this.plotPort
lLoca.fetch(lOptions, this);

This will bind the reset with the method instead of calling it.

And about calling one method from another its pretty straight forward, we just call it using this, but if that call is being made from some callback function or any other similar thing where this does not refer to the view, then its advised to save the reference of this before that callback and use it whenever required in the callback. For example,

var _view = this;
// doing collection fetch

this.collection.fetch({
  success :  function (collection, response) {
    // if you want to access view here, it can be accessed using 
    // '_view' variable, because 'this' here does not point to the view.
  }
});

This is just an example, but same concept can be used for similar problems.

Upvotes: 2

japrescott
japrescott

Reputation: 5015

try this in your initialize function

      _.bindAll(this,'plotPort', 'plotLoc');

      var lOptions = {};                  
      lOptions.success = this.plotLoc;
      lLoca.fetch(lOptions,this);
      lLoca.on('reset', this.plotPort, this);

Upvotes: 0

mumu2
mumu2

Reputation: 671

I would adwise to use _.bindAll(this) at the beginning of initialize function.

Upvotes: 0

Related Questions