gojs 自定义绑定作为 textBlock 的一部分传递给函数

Question

使用 GOJS 可以将绑定参数传递给函数吗？

我想使用这个传递的 var 来更改返回的字体类型组，例如在下面的代码中 aplha 参数被传回调用 textStyle() 函数的节点根据传递的值执行 if/else。

      myDiagram.nodeTemplateMap.add("Source",
        $(go.Node, "Auto", nodeStyle(),
            $(go.Shape, "RoundedRectangle",
                { fill: bluegrad },
                new go.Binding("fill", "color")
            ),
            $(go.TextBlock, textStyle(alpha),
                new go.Binding("text", "text"),
                new go.Binding("alpha", "alpha")
            ),
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, true, true)
        ));


       //.....
            myPalette =
                $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
                    {
                        nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                        model: new go.GraphLinksModel([  // specify the contents of the Palette
                            { category: "Source", text: "source", alpha:"fontGroupA"},
                            { category: "Source", text: "source", alpha:"fontGroupB"},
                            ])
                    });


      //.....
        // Common text styling
        function textStyle(alpha) {
            console.log("value passed:"+alpha);
            return {
                margin: 6,
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: bigfont
            }
        }

更新

根据下面 Walter 的回答，我添加了一个回调和绑定，现在可以使用了。

//.....
                myPalette =
                    $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
                        {
                            nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                            model: new go.GraphLinksModel([  // specify the contents of the Palette
                                { category: "Source", text: "source_a", css:"fontGroupA"},
                                { category: "Source", text: "source_b", css:"fontGroupB"},
                                ])
                        });


//...
$(go.TextBlock,
                            {
                               // Default settings // 
                               font: "bold 15pt Helvetica, Arial, sans-serif",
                                stroke: lightText,
                                margin: 8,
                                maxSize: new go.Size(100, NaN),
                                wrap: go.TextBlock.WrapFit,
                                editable: true
                            },
                            new go.Binding("font", "css", function(v) {return cssStyle(v).font}).makeTwoWay(),
                            new go.Binding("stroke", "css", function(v) {return cssStyle(v).stroke}).makeTwoWay()
                        )


   // ...
 function cssStyle(theStyle) {

        if (theStyle === "fontGroupA"){
            return {
                margin: 6,
                wrap: go.TextBlock.WrapFit,
                textAlign: "right",
                editable: true,
                font: bigfont,
                stroke: "red"
            }
        }else if (theStyle === "fontGroupB"){
            return {
                margin: 6,
                wrap: go.TextBlock.WrapFit,
                textAlign: "left",
                editable: true,
                font: smallfont,
                stroke: "blue"
            }
        }else {
             return {
                margin: 6,
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: midfont
            }
        }

Answer 1

首先我要指出

    $(go.TextBlock, textStyle(alpha),
      new go.Binding("alpha", "alpha"))

不正确。没有 TextBlock.alpha 属性，所以你不能绑定到那个属性。如果您已经尝试过您的代码，您应该会在控制台中看到该错误。

其次，不清楚您想从哪里获得 alpha 的值。你的代码在你定义模板时正在评估它，所以这对我来说看起来像是一个错误。也许您之前已经设置了它的值。尽管如此，它仍将是模板定义时的特定值。

第三，您可以根据 data.alpha 的值为每个 TextBlock 属性设置单独的绑定。每个绑定都将使用一个转换函数，该函数在给定 data.alpha.

的值的情况下选择适当的值

你的 textStyle 函数没有根据 alpha 参数产生不同的值，但我可以想象这样的事情：

    $(go.TextBlock,
      new go.Binding("text"),
      new go.Binding("font", "alpha", computeFontForAlpha))

其中 computeFontForAlpha returns 所需的 CSS 字体字符串取决于 data.alpha.

的值

gojs 自定义绑定作为 textBlock 的一部分传递给函数

gojs custom binding passed to function as part of textBlock

gojs