स्टीवन Ickman के समाधान आसान है, लेकिन अधूरा है। डैनी बेकेट और सैम के जवाब छोटा और अधिक मार्गदर्शन कर रहे हैं, और एक कॉलबैक कि दोनों गतिशील और lexically scoped "इस" एक ही समय में की जरूरत होने का एक ही सामान्य स्थिति में असफल। मेरे कोड पर जाएं, तो नीचे मेरी स्पष्टीकरण टीएल है, डॉ ...
मैं संरक्षित करने के लिए "इस" पुस्तकालय कॉलबैक साथ प्रयोग के लिए गतिशील scoping, के लिए की जरूरत है और मैं की जरूरत है एक "इस" वर्ग उदाहरण के लिए शाब्दिक scoping के साथ। मैं तर्क है कि यह एक कॉलबैक जनरेटर में उदाहरण के पारित करने के लिए, प्रभावी रूप से वर्ग उदाहरण से अधिक पैरामीटर बंद दे सबसे खूबसूरत है। संकलक आपको बताता है कि आप ऐसा करने से चूक गए। मैं lexically scoped पैरामीटर "outerThis" बुला के एक सम्मेलन है, लेकिन "स्व" का उपयोग करें या एक और नाम बेहतर हो सकता है।
"इस" कीवर्ड के उपयोग OO दुनिया से चोरी हो जाता है, और जब टाइपप्रति इसे अपनाया (ECMAScript से 6 चश्मा मुझे लगता है), वे एक lexically scoped अवधारणा और एक गतिशील scoped अवधारणा है, जब भी एक तरीका है एक अलग इकाई द्वारा कहा जाता है सम्मिश्रित । मैं इस पर एक छोटे से इस बात से नाराज हूँ, ताकि मैं इसके बारे में बंद lexically scoped वस्तु दृष्टान्त हाथ कर सकते हैं मैं टाइपप्रति में एक "स्व" कीवर्ड पसंद करेंगे। वैकल्पिक रूप से, जे एस जब यह आवश्यक है (और इस प्रकार एक ही बार में सभी वेब पृष्ठों को तोड़ने) एक स्पष्ट पहले की स्थिति 'फोन करने वाले "पैरामीटर की आवश्यकता के लिए नए सिरे से परिभाषित किया जा सकता है।
यहाँ मेरी समाधान (एक बड़ा वर्ग से अलग किया) है। विशेष रूप से एक हंस रास्ता पर पद्धतियों को बुलाया जाता है, और "dragmoveLambda" विशेष रूप से के शरीर लें:
export class OntologyMappingOverview {
initGraph(){
...
// Using D3, have to provide a container of mouse-drag behavior functions
// to a force layout graph
this.nodeDragBehavior = d3.behavior.drag()
.on("dragstart", this.dragstartLambda(this))
.on("drag", this.dragmoveLambda(this))
.on("dragend", this.dragendLambda(this));
...
}
dragmoveLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
console.log("redefine this for dragmove");
return function(d, i){
console.log("dragmove");
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
// Referring to "this" in dynamic scoping context
d3.select(this).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
outerThis.vis.selectAll("line")
.filter(function(e, i){ return e.source == d || e.target == d; })
.attr("x1", function(e) { return e.source.x; })
.attr("y1", function(e) { return e.source.y; })
.attr("x2", function(e) { return e.target.x; })
.attr("y2", function(e) { return e.target.y; });
}
}
dragging: boolean =false;
// *Call* these callback Lambda methods rather than passing directly to the callback caller.
dragstartLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
console.log("redefine this for dragstart");
return function(d, i) {
console.log("dragstart");
outerThis.dragging = true;
outerThis.forceLayout.stop();
}
}
dragendLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
console.log("redefine this for dragend");
return function(d, i) {
console.log("dragend");
outerThis.dragging = false;
d.fixed = true;
}
}
}
