如果我使用函数分配内容，Qtip 标题和按钮将不起作用

Question

我正在使用 qtip extension for ctyoscape.js 在单击节点时添加 qtips。

依赖关系：

cytoscape-2.5.0
jquery-2.1.4
jquery-ui-1.11.4
cytoscape.js-qtip
qtip2-2.2.0

我遇到的问题是它无法正常工作我使用匿名函数来分配 qtip content。

如果我静态分配内容，它工作正常：

 this.cy.elements().each().qtip({           
    content: {
        text: "some text", 
        title: "some title", 
        button: true
    },

    /*other options*/
});

如果我动态分配它：

this.cy.elements().each().qtip({    

    content:{
            text: function(event, api) {
                return "some text"  + this.data().properties.id;;
                },
            title: function(event, api) {
                return "some title" +  this.data().properties.id;;
            },
            button: true                            
    },

    /*other options*/
});

它正确引用了元素 object，但由于某种原因它没有创建标题或按钮。从未使用过标题函数回调。

对于发生这种情况的原因有什么建议吗？

线索 1：

如果我退出函数回调，在 jquery.qtip.js，第 1027 和 1028 行：

if($.isFunction(contentOptions.text)) { this._updateContent(contentOptions.text, FALSE); }
if($.isFunction(contentOptions.title)) { this._updateTitle(contentOptions.title, FALSE); }

对于静态文本和标题，contentOptions.text = 'some text' 和 contentOptions.title = 'some title'。

对于动态文本和标题，contentOptions.text = function()，而 contentOptions.title = false。

How/why标题回调丢失了吗？

线索二：

如果我删除 text 的匿名函数但保留 title 的匿名函数，将使用标题回调，但是，this 不引用 cytoscape 元素 object，它引用了 qtip div。

    content: {
        text: "some text", 
        title: function(){ return "foo" + this.data().properties.id;}, //<-- will error because this.data() is not a function.
        button: true
    },

Answer 1

我很高兴有人 post 一个答案来解释 为什么 这有效，但解决方案是使用 qtip api 对象，在文本回调中：

    content:{
            text: function(event, api) {

                api.set('content.title', "some title" +    this.data().properties.id);
                api.set('content.button', true);
                return "some text"  +  this.data().properties.id;
                }                   
    },

我想这是关于什么的，就像是在某种 'create qtip' 事件上触发了回调，并且因为只有这些事件之一，所以只触发了文本回调。（这对我来说真的没有意义，但是..）。

Answer 2

我认为您的问题与关闭有关。您当时需要 capture this。我认为类似以下内容可以解决您的问题（未经测试）：

title:  function(elem) {
    return function(event, api) {
        return "some title" +  elem.data().properties.id;
    }
}(this),

其工作方式是立即调用外部函数，并且 captures 参数中的 this 变量 elem。然后返回内部函数，您可以像使用 this

一样使用 elem

如果我使用函数分配内容，Qtip 标题和按钮将不起作用

Qtip title and button not working if I use functions to assign content

javascript

callback

anonymous-function

qtip2

cytoscape.js