javascript - Cytoscape 内容样式功能在动态生成时不起作用

Question

我正在使用 Cytoscape 2.5.0。

这是基本的工作代码：

var elements = [
                { group: "nodes", data: { id: "n0", type: "foo"}, position: { x: 100, y: 100 } },
                { group: "nodes", data: { id: "n1", type: "bar"}, position: { x: 200, y: 200 } },
                { group: "nodes", data: { id: "n2", type: "foo"}, position: { x: 300, y: 300 } },
                { group: "nodes", data: { id: "n3", type: "biz"}, position: { x: 400, y: 400 } },
                { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
            ];

    var style = cytoscape.stylesheet()      
        .selector('node[type = "foo"]').css({
                            'background-color': 'red',
                            'content': function(ele){
                                return "Is a foo: " + ele.data().id;
                            }
                        })
        .selector('node[type = "bar"]').css({
                            'background-color': 'blue',
                            'content':function(ele){
                                return "Is a bar: " + ele.data().id;
                            }
                        })
        .selector('node[type = "biz"]').css({
                            'background-color': 'green',
                            'content': function(ele){
                                return  ele.data().id;
                            }
                        })
        ;           

    var dom = $('#graph');

    var cy = cytoscape({
        container: dom,
        elements: elements, 
        style: style
    });

如您所见，我们有三种不同类型的节点：foo、bar和biz。

我们分配了选择器以不同的颜色，并根据节点类型显示自定义标签。

此代码工作正常：

但是现在我想抽象样式的分配，以避免在分配选择器和样式时重复代码。

为此，我创建了一个Config对象。

    var Config = function(type, color, message){
        this.color = color;
        this.fn = function(ele){
            var eleMessage = (message)? message + ele.data().id : ele.data().id; 
            return eleMessage;
        };

        this.selector = 'node[type = "' + type + '"]';
    }

    var configs = [
        new Config("foo", "red", "this is foo"),
        new Config("bar", "blue", "this is bar"), 
        new Config("biz", "green")
    ];

    for (var i in configs){
        var config = configs[i];

        style.selector(config.selector)
             .css({'background-color': config.color, 'content': config.fn});
    }

代码现在停止工作。颜色样式工作正常，但所有标签功能都相同。

我认为这可能是 Javascript 闭包的问题，​​所以我将函数包装在 IIFE 中，但这也不能解决它。

var Config = function(type, color, message){
        this.color = color;
        this.fn = (function(message) {return function(ele){
            var eleMessage = (message)? message + ele.data().id : ele.data().id; 
            return eleMessage;
        };})(message);

        this.selector = 'node[type = "' + type + '"]';
    }

有什么解决这个问题的建议吗？