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

Question

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

如果我在数据中手动设置组属性那么它会完全按照我的预期工作并且节点显示为组的一部分，但是如果组是使用绑定设置的则似乎没有组连接被制造。

我错过了什么？

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

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;
  }

这个有效^^^

现在，如果我将数据中的组参数设置为 "groupName" 而不是组，然后在 init 函数中将组绑定到组名称，节点将不再显示为组的一部分

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

绑定用于使一个部件的图形对象的属性与该部件的模型数据的属性保持同步。绑定不用于维护部件之间的关系。只有模特才知道如何解读和维持关系。

如果要使用数据属性 "groupName" 而不是 "group" 来引用节点的包含组，请设置 GraphLinksModel.nodeGroupKeyProperty 到 "groupName"。最好在设置 Model.nodeDataArray.

之前

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

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

GOJS, how do you bind data to the group property?

javascript

gojs