javascript - Reference backbone functions from within a nested d3 function -

i trying reference backbone function within d3 function inside backbone render function. must reference other backbone functions, backboney things, can't access them referencing using this/that method (i use this/ƒthis):

define([   // require.js file modularization  ], function(){   return backbone.view.extend({     initialize: function(options){       //code       this.render();     },      render: function(options){       // how access backbone view in nested situations       var ƒthis = this;            //normal rendering       if (!options) {                 // stuff, vars          // compile template          // d3 stuff         var linedata = ({...});         var pathfunction = d3.svg.line()         var beatunwindingpaths = [......];          var beatcontainer = d3.select('#beatholder'+this.parent.cid);         var beatpath = beatcontainer //.append('g')             .insert('path', ':first-child')             .data([beatunwindingpaths[0]])             .attr('d', pathfunction)             .attr('class', 'beat')    //this want reference function called, , how think should called             .on('click', ƒthis.toggle);    //but limited calling function declared within backbone render func(), this:             .on('click', toggle);     //currently having declare functions inside render         function unroll() {           //do stuff         };         function reverse() {         };         $('#a').on('click', unroll);         $('#b').on('click', reverse);       }     },  // function want call     toggle: function(){        //do stuff other backbone models, collections , other cool stuff     }   }); }); 

how access backbone toggle function inside d3 code?

error code within toggle function (worked before, trying figure out why isn't now), , error on 313, not 314, browser console 1 line off. put console.log() see ƒthis.toggle got in function, error-ed out on switching of bool value.

311 toggle: function(){ 312   //switch selected boolean value on model 313   this.model.set('selected', !this.model.get('selected')); 314   //re-render it, passing clicked beat render() 315   this.render(this.model); 316   // log.sendlog([[1, "beat" + this.model.cid + " toggled: "+!bool]]); 317   dispatch.trigger('beatclicked.event'); 318 } 

i switched rendering circle in template, having d3 create (so animate using d3 functions), , think somehow object has lost binding model. working on this.....

this isn't d3/backbone issue, it's javascript. can't pass object method invoked later , expect this work within method unless bind in 1 way or another:

var myobject = {     method: function() {         this.dosomestuff();     },     dosomestuff: function() {         console.log("stuff!");     } };  myobject.method(); // "stuff!"  // pass method somewhere else - // event handler var mymethod = myobject.method;  mymethod(); // typeerror: object [object global] has no method 'dosomestuff' 

the second part fails because invocation myobject.mymethod() binds this myobject, assigning method variable (or assigning event handler) not (in cases, this bound window, d3 reassign this dom element set handler on).

the standard fixes 1) wrapping in function:

var mymethod = function() {     myobject.method(); };  mymethod();  // "stuff!" 

or 2) binding object somehow, e.g. in backbone initialize method (underscore provides useful _.bindall utility purpose):

backbone.view.extend({     initialize: function(options){         _.bindall(this, 'toggle');         // can pass this.toggle around impunity     },     // ... });