Polymer questo e Cytoscape questo

Question

quindi ho un problema ed è molto probabilmente perché ancora non capisco ... JavaScript Cytoscape ha la propria 'questo' e polimero ha loro 'questo'

<div id="labelFld">{{node.label}}</div> 
    <div id="measureFld">{{node.measure}}</div> 
    <div id="timesignatureFld">{{node.time_signature}}</div> 
    <div id="voiceFld">{{node.voice}}</div> 
    <div id="beatFld">{{node.beat}}</div> 
    <div id="meventFld">{{node.event}}</div> 

var cy; 
cytoscape({ 
    ready : function() { 
       Polymer: ({ 
       ... 
         properties : { 
           node : { 
           type : Object, 
           notify : true, 
           readOnly : true 
         } 
       }, 
       ... 

// Fires when the local DOM has been fully prepared 
ready : function() { 
    var self_node = this.node; // <- 'this' via Polymer 
    try { 
     cy = cytoscape({ 
       container : this.$.rhythmgraph, 
       ready : function (e) {} 
      }); 
    } catch (err) { 
     console.log(err); 
    } 

    // Assign handler to Cytoscape click event for node elements 
    cy.on('click', 'node', { 
     "nodedata" : self_node // <- Seems to pass by value, not reference 
    }, function (e) { 
     self_node = this.data(); // <- 'this' via Cytoscape 
     console.log(self_node); 
     // e.data.nodedata = this.data(); 
    }); 
}, 

ma al fine di aggiornare il mio <div>{{node.label}}</div> devo essere in grado di fare this.node.label = "N42" // Polymer ma non riesco a farlo nella cy.on('click','node', ...) perché ho bisogno this.data() // Cytoscape dentro.

Scope mi sta davvero uccidendo.

EDIT

Alla fine, ho creato un osservatore a guardare e aggiornamento:

self_node = this.selectedNode; 
    var poly = this; 

    Object.observe(self_node, function(changes) { 
     changes.forEach(function(change) { 
     if(change.type == "update") { 
     poly.selectedNode = { 
      "id":  change.object.id, 
...         } 
     }; 
     poly.notifyPath('selectedNode.id', change.object.id); 

     } 
    });}.bind(poly)); 

Answer 1

Trovo che questo sia un Gotcha comune tra i principianti JS dev. Dovrai associare la funzione al proprio riferimento this.

cy.on('click', 'node', { 
    "nodedata" : rhynode 
}, function (e) { 
    e.data.nodedata = this.data(); 
    console.log(e.data.nodedata); 
}.bind(this)); // here 

Con ES2015, le funzioni di direzione sarebbe legare automaticamente al corretto this:

cy.on('click', 'node', { 
    "nodedata" : rhynode 
}, (e) => { 
    e.data.nodedata = this.data(); 
    console.log(e.data.nodedata); 
});