GOJS，如何将数据绑定到 group 属性？

Question

我有一个 GOJS 应用程序启动并正在运行，我正在尝试将我的数据中的一个参数绑定到 group 属性。

如果我在数据中手动设置 group 属性，那么它的工作方式与我预期的完全一样，并且节点显示为组的一部分，但如果使用绑定设置组，则似乎没有建立组连接。

我错过了什么？

显示在数据中设置的组的示例

var nodes = []
var nodeObj ={
    key:"groupObject",
    text:"group",
    isGroup:true
  }
  nodes.push(nodeObj)

  nodeObj = {
    key:"node1",
    text:"node1",
    group:"groupObject"
  }
  nodes.push(nodeObj)

  nodeObj = {
    key:"node2",
    text:"node2",
    group:"groupObject"
  }
  nodes.push(nodeObj)
}

const initDiagram = () => {
    const $ = go.GraphObject.make;
    const diagram =
      $(go.Diagram,
        {
          'undoManager.isEnabled': true,
          'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
          model: $(go.GraphLinksModel,
            {
              linkKeyProperty: 'key' 
            })
      });

    diagram.nodeTemplate = 
        $(go.Node, 'Auto',
            $(go.Shape, 'RoundedRectangle',
            { name: 'SHAPE', fill: 'white', strokeWidth: 0 },
            new go.Binding('fill', 'color')),
            $(go.TextBlock,
            { margin: 8, editable: true, stroke:"black" },
            new go.Binding('text').makeTwoWay()
            )
        );

    diagram.groupTemplate = 
      $(go.Group, "Vertical", $(go.GridLayout,{wrappingColumn:1}),
        $(go.TextBlock,         // group title
          { alignment: go.Spot.Center, font: "Bold 15pt Sans-Serif" },
          new go.Binding("text")),  
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle",  // surrounds the Placeholder
            {fill: "lightblue" }),
          $(go.Placeholder,
            { padding: 5}),
        )
    );
    return diagram;
  }

这行得通^^^

现在如果我将数据中的 group 参数设置为“groupName”而不是 group，然后在 init 函数中将 group 绑定到 groupName，节点不再作为 group 的一部分出现

var nodes = []
var nodeObj ={
    key:"groupObject",
    text:"group",
    isGroup:true
  }
  nodes.push(nodeObj)

  nodeObj = {
    key:"node1",
    text:"node1",
    groupName:"groupObject"      //this line has changed
  }
  nodes.push(nodeObj)

  nodeObj = {
    key:"node2",
    text:"node2",
    groupName:"groupObject"      //This line has changed
  }
  nodes.push(nodeObj)
}

const initDiagram = () => {
    const $ = go.GraphObject.make;
    const diagram =
      $(go.Diagram,
        {
          'undoManager.isEnabled': true,
          'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
          model: $(go.GraphLinksModel,
            {
              linkKeyProperty: 'key'
            })
      });

    diagram.nodeTemplate = 
        $(go.Node, 'Auto',
            new go.Binding('group','groupName'),      //this line has changed
            $(go.Shape, 'RoundedRectangle',
            { name: 'SHAPE', fill: 'white', strokeWidth: 0 },
            new go.Binding('fill', 'color')),
            $(go.TextBlock,
            { margin: 8, editable: true, stroke:"black" },
            new go.Binding('text').makeTwoWay()
            )
        );

    diagram.groupTemplate = 
      $(go.Group, "Vertical", $(go.GridLayout,{wrappingColumn:1}),
        $(go.TextBlock,         // group title
          { alignment: go.Spot.Center, font: "Bold 15pt Sans-Serif" },
          new go.Binding("text")),  
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle",
            {fill: "lightblue" }),
          $(go.Placeholder,
            { padding: 5}),
        )
    );
    return diagram;
  }

Answer 1

绑定用于使一个 Part 的 GraphObjects 的属性与该 Part 的模型数据上的属性保持最新。绑定不用于维护部件之间的关系。只有模型知道如何解释和维护关系。

如果您想使用数据属性“groupName”而不是“group”来引用节点的包含组，请将 GraphLinksModel.nodeGroupKeyProperty 设置为“groupName”。最好在设置 Model.nodeDataArray 之前。

另外，请阅读https://gojs.net/latest/intro/dataBinding.html#ChangingGraphStructure。