Polymer dieses und Cytoscape diese

Question

So habe ich ein Problem, und es ist sehr wahrscheinlich, weil ich immer noch nicht JavaScript bekommen ... Cytoscape hat ihre eigenen ‚dies‘ und Polymer hat ihre ‚dieses‘

<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(); 
    }); 
}, 

aber zu aktualisieren, um meine <div>{{node.label}}</div> ich in der Lage sein this.node.label = "N42" // Polymer zu tun, aber ich kann es nicht in den cy.on('click','node', ...) tun, weil ich this.data() // Cytoscape innen dort brauche.

Scope bringt mich wirklich auf diese.

EDIT

Am Ende habe ich einen Beobachter zu beobachten und zu aktualisieren:

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

ich das eine gemeinsame Gotcha unter JS dev Anfänger. Sie müssen die Funktion an die richtige this Referenz binden.

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

Mit ES2015, Pfeil Funktionen binden würde automatisch auf die richtige this:

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