GOJS, как вы связываете данные со свойством группы? - PullRequest
Новая
       72

GOJS, как вы связываете данные со свойством группы?

0 голосов
/ 20 февраля 2020

У меня запущено и работает приложение 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;
  }

Это работает ^^^

Теперь, если я установлю параметр group в данных вместо «groupName» вместо group, затем связать group с 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;
  }

1 Ответ

1 голос
/ 20 февраля 2020

Привязки используются для поддержания актуальности свойств графических объектов одной детали со свойствами данных модели этой детали. Привязки не используются для поддержания отношений между частями. Только модели знают, как интерпретировать и поддерживать отношения.

Если вы хотите использовать свойство данных «groupName» вместо «group» для ссылки на содержащую группу узла, установите GraphLinksModel.nodeGroupKeyProperty в "groupName". Желательно, прежде чем установить Model.nodeDataArray .

Также, пожалуйста, прочитайте https://gojs.net/latest/intro/dataBinding.html#ChangingGraphStructure.

...