Question

所以我遇到了问题而且最有可能因为我还没有得到JavaScript ...... Cytoscape有自己的＆＃39;这个＆＃39;和Polymer有他们的＆＃39;

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

但是为了更新我的<div>{{node.label}}</div>，我必须能够this.node.label = "N42" // Polymer，但我无法在cy.on('click','node', ... )中执行此操作，因为我需要this.data() // Cytoscape在那里。

范围真的让我感到害怕。

修改的

最后，我创建了一个Observer来观察和更新：

    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

我发现这是JS开发者中常见的问题。您必须将函数绑定到其正确的this引用。

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

使用ES2015，箭头功能会自动绑定到正确的this：

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

聚合物这和Cytoscape这个

1 个答案: