嵌套d3函數內的參考主幹函數

我想從主幹render函數內的d3函數內引用主幹函數。我現在必須引用其他骨幹作用，做一些事情backboney，但無法通過使用此引用它的訪問他們/那個方法（我用這個/ƒthis）：嵌套d3函數內的參考主幹函數

define([ 
    // this is for require.js file modularization 
], function(){ 
    return Backbone.View.extend({ 
    initialize: function(options){ 
     //CODE 
     this.render(); 
    }, 

    render: function(options){ 
     // HOW I ACCESS THE BACKBONE VIEW IN NESTED SITUATIONS 
     var ƒthis = this;  

     //NORMAL RENDERING 
     if (!options) {   
     // Do some stuff, get some vars 

     // compile the 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 IS WHERE I WANT TO REFERENCE THE FUNCTION TO BE CALLED, AND HOW I THINK IT SHOULD BE CALLED 
      .on('click', ƒthis.toggle); 
    //BUT CURRENTLY I AM ONLY LIMITED TO CALLING A FUNCTION DECLARED WITHIN THE BACKBONE render func(), so it would look like this: 
      .on('click', toggle); 

    //CURRENTLY I AM HAVING TO DECLARE THE FUNCTIONS INSIDE RENDER 
     function unroll() { 
      //do some stuff 
     }; 
     function reverse() { 
     }; 
     $('#a').on('click', unroll); 
     $('#b').on('click', reverse); 
     } 
    }, 

// THIS IS THE FUNCTION I WANT TO CALL 
    toggle: function(){ 
     //DO some stuff to the other BackBone models, collections and other cool stuff 
    } 
    }); 
});

如何訪問D3代碼裏面的主幹toggle函數？

錯誤代碼是從切換功能本身（之前工作，所以我想弄清楚爲什麼它不是現在），錯誤是在313，而不是314，我的瀏覽器控制檯始終是一條線。我把一個console.log（）用函數中的ƒthis.toggle看到，但是在切換bool值時出錯了。

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

我從渲染圈中的模板切換到具有D3創建它（所以我們可以使用D3的功能設置動畫），我覺得莫名其妙的對象已經失去了它綁定到模型。在此工作.....

來源

2013-05-21 chris Frisina

你已經回答了你的問題 - 你救了一個參照本與fthis，並使用fthis引用定義切換功能實際上，在視圖對象 – kinakuta

@kinakuta，他甚至不需要'fthis'。這不是一個異步調用，所以'fthis.toggle'將被直接評估。我在這裏看到的唯一可能是錯誤的是調用'toggle'方法時的上下文。 – Loamhoof

'ƒthis.toggle'is not working，得到匿名函數錯誤'Uncaught TypeError：不能調用方法'get'的undefined beatView.js：314 Backbone.View.extend.toggle beatView.js：314 （匿名函數）它指向d3作爲罪魁禍首：'函數d3_selection_onListener（listener，argumentz）{返回函數（e）{ var o = d3.event; d3.event = e; argumentz [0] = this .__ data__; 嘗試{listener.apply（this，argumentz）;} finally {d3.event = o;}};}' –

這不是D3/Backbone問題，它只是Javascript。你不能傳遞一個對象方法稍後調用，並期望this該方法中的工作，除非你在這種或那種方式將其綁定：

var myObject = { 
    method: function() { 
     this.doSomeStuff(); 
    }, 
    doSomeStuff: function() { 
     console.log("stuff!"); 
    } 
}; 

myObject.method(); // "stuff!" 

// pass this method somewhere else - this is 
// effectively what you do with an event handler 
var myMethod = myObject.method; 

myMethod(); // TypeError: Object [object global] has no method 'doSomeStuff'

因爲調用myObject.myMethod()結合this到myObject第二部分失敗，但將該方法分配給變量（或將其分配爲事件處理程序）不會（在大多數情況下，this綁定爲window，但D3會將this重新分配給您設置處理程序的DOM元素）。

標準修補程序是1）中的函數包裹它：

var myMethod = function() { 
    myObject.method(); 
}; 

myMethod(); // "stuff!"

或2）它綁定到對象以某種方式，例如在骨幹initialize方法（下劃線提供了一個有用的工具_.bindAll爲了這個目的）：

Backbone.View.extend({ 
    initialize: function(options){ 
     _.bindAll(this, 'toggle'); 
     // now you can pass this.toggle around with impunity 
    }, 
    // ... 
});

來源

2013-05-21 18:31:42 nrabinowitz

嵌套d3函數內的參考主幹函數

回答

相關問題