javascriptstringobjectbindready

Cannot use variable in bind method


I have below code

    jsPlumb.bind("ready", function() {          
                    jsPlumb.importDefaults({
                        Anchors  : ["RightMiddle", "LeftMiddle"],
                        EndpointStyles : [{ fillStyle:'#55636b' }, { fillStyle:'#55636b' }],
                        Endpoints : [ [ "Rectangle", {width:1, height:1} ], [ "Rectangle", { width:1, height:1 } ]],
                        ConnectionOverlays  : [
                            [ "Arrow", { location: -2 , width: 15, length: 15 } ]
                        ],
                        Connector:[ "Flowchart", { stub: 10, gap:10 } ],                                
                        PaintStyle  : {
                            lineWidth:2,
                            strokeStyle:"#55636b",
                            joinstyle:"round"
                        }
                    });

                //XSSOK
                    jsPlumb.connect({ source:'start', target:'task0' });
                    jsPlumb.connect({ source:'task0', target:'end' });
                });

in the above code the last two lines, if I directly use in bind method then it is working.

jsPlumb.connect({ source:'start', target:'task0' });
jsPlumb.connect({ source:'task0', target:'end' });

But If I store the same value in variable and use the variable then it stopped working.

jsPlumb.bind("ready", function() {          
                        jsPlumb.importDefaults({
                            Anchors  : ["RightMiddle", "LeftMiddle"],
                            EndpointStyles : [{ fillStyle:'#55636b' }, { fillStyle:'#55636b' }],
                            Endpoints : [ [ "Rectangle", {width:1, height:1} ], [ "Rectangle", { width:1, height:1 } ]],
                            ConnectionOverlays  : [
                                [ "Arrow", { location: -2 , width: 15, length: 15 } ]
                            ],
                            Connector:[ "Flowchart", { stub: 10, gap:10 } ],                                
                            PaintStyle  : {
                                lineWidth:2,
                                strokeStyle:"#55636b",
                                joinstyle:"round"
                            }
                        });                 
                    sbConnections
                    });

Please help me to solve this problem as these values are coming from web service. I cannot hardcode it here.


Solution

  • I resolved this issue by using eval function

    jsPlumb.bind("ready", function() {          
                            jsPlumb.importDefaults({
                                Anchors  : ["RightMiddle", "LeftMiddle"],
                                EndpointStyles : [{ fillStyle:'#55636b' }, { fillStyle:'#55636b' }],
                                Endpoints : [ [ "Rectangle", {width:1, height:1} ], [ "Rectangle", { width:1, height:1 } ]],
                                ConnectionOverlays  : [
                                    [ "Arrow", { location: -2 , width: 15, length: 15 } ]
                                ],
                                Connector:[ "Flowchart", { stub: 10, gap:10 } ],                                
                                PaintStyle  : {
                                    lineWidth:2,
                                    strokeStyle:"#55636b",
                                    joinstyle:"round"
                                }
                            });                 
                        eval(sbConnections);
                        });