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 根据data.alpha 的值返回所需的CSS 字体字符串。