流程图控件GoJS教程：数据绑定（上）

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.0.16发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

数据绑定是一种从源对象提取值并在目标对象上设置属性的方法。目标对象通常是GraphObject；源对象通常是模型中保存的JavaScript数据对象。

您可以编写代码，从模型数据中获取所需的值，在图上搜索适当的部件， 在该部件的可视树中搜索目标GraphObject，然后使用该值在该GraphObject上设置一个或多个属性，也许在以适合各个属性的方式修改或转换原始值之后。但是，数据绑定提供了一种声明性的方式来指定这种行为，仅通过提供一个 Binding即可命名源对象和目标对象上的属性。

尝试绑定GraphObject的不存在属性可能会导致警告或错误，您可以在控制台日志中看到该警告或错误。始终检查控制台日志中是否存在绑定系统通常禁止的任何潜在异常。

零件与数据的关系以及绑定

首先，查看一个图，其中包含有关用于构建一些示例节点和链接的GraphObjects的注释：

两个Node和一个Link属于该图，位于左侧，带有阴影。所述的TreeModel并在其两个数据对象Model.nodeDataArray是在右侧，为灰色。

每个节点和链接都有一个Panel.data属性，该属性引用模型中的数据对象。因此，给定一个节点，可以很容易地引用您在模型中的数据上放置的所有数据属性。这些参考被绘制为灰色链接。

每个节点还具有三个Binding，用绿色虚线绘制：

• 从属性到Part.locationdata.location属性

• 从属性到Shape.filldata.color属性

• 从属性到TextBlock.textdata.text属性

模板和数据绑定的使用大大简化了必须存储在模型数据中的信息，并允许以独立于模型数据的各种方式表示节点和链接时具有极大的灵活性。但是并非所有数据属性都需要在模板的绑定中使用。

需要注意的是绑定为不是从数据到任何引用部分。将模型与图表分开的全部目的是避免从数据引用图表或节点或链接或工具。唯一的引用从图到模型是Diagram.model属性，每个节点或链路的Panel.data属性。

绑定字符串和数字属性

将GraphObject属性绑定到数据属性很容易。在此示例中，我们不仅将节点中的TextBlock.text和Shape.fill绑定到节点数据的属性值，而且对于较粗的彩色线，我们还将链接中的Shape.stroke和Shape.strokeWidth绑定到链接数据的属性值。

您需要做的就是在目标GraphObject上添加一个新的Binding，该绑定在视觉对象上命名为target属性，在数据对象上命名为source属性。当然，目标属性必须是可设置的属性。某些GraphObject属性不可设置。如果指定的目标属性名称不存在，您将在控制台中收到警告消息。如果源属性值未定义，则不评估绑定。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),  // shape.fill = data.color
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))  // textblock.text = data.key
    );

  diagram.linkTemplate =
    $(go.Link,
      $(go.Shape,        new go.Binding("stroke", "color"),  // shape.stroke = data.color
        new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick
      $(go.Shape,
        { toArrow: "OpenTriangle", fill: null },        new go.Binding("stroke", "color"),  // shape.stroke = data.color
        new go.Binding("strokeWidth", "thick"))  // shape.strokeWidth = data.thick
    );  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "pink" }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta", color: "blue", thick: 2 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

请注意，有两个使用源链接数据的“颜色”属性的绑定。链接模板中的每个目标Shape都有一个。每个都绑定Shape.stroke属性。

绑定对象属性，例如Part.location

您还可以对具有对象值的属性进行数据绑定。例如，数据绑定Part.location属性是很常见的。

Part.location的值是Point，因此在此示例中，data属性必须是Point。

diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc"),  // get the Node.location from the data.loc value
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [    // for each node specify the location using Point values
    { key: "Alpha", color: "lightblue", loc: new go.Point(0, 0) },
    { key: "Beta", color: "pink", loc: new go.Point(100, 50) }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

为简洁起见，其余这些示例都使用默认的Diagram.linkTemplate。

转换功能

但是，如果您希望位置的数据属性值不是Point，该怎么办？您可以提供将实际数据属性值转换为所需值类型或格式的转换功能。

对于此类示例，Point类包含一个静态函数Point.parse，您可以使用该函数 将字符串转换为Point对象。它期望输入字符串中有两个数字，分别代表Point.x和Point.y值。它返回具有这些值的Point对象。

您可以将转换函数作为第三个参数传递给Binding构造函数。在这种情况下，它是Point.parse。这允许以字符串（“ 100 50”）的形式而不是作为返回Point的表达式来指定位置。对于模型对象的数据属性，您通常会希望使用字符串作为 Points, Sizes, ;Rects, Margins, 和Spots, 而不是引用这些类的对象。 可以轻松地以JSON和XML读写字符串。 尝试读取/写入对象类将占用额外的空间，并且需要编写者和阅读者双方进行额外的合作。

 diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),  // convert string into a Point value
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [
    { key: "Alpha", color: "lightblue", loc: "0 0" },  // note string values for location
    { key: "Beta", color: "pink", loc: "100 50" }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

转换函数可以是命名函数或匿名函数。它们采用数据属性值，并返回适合所设置属性的值。它们不应有任何副作用。他们可能以任意顺序被多次调用。

这是一个示例，其中有多个Shape属性数据绑定到同一个名为“ highlight”的布尔数据属性。每个转换函数均采用布尔值，并为数据绑定的属性返回适当的值。通过将“ highlight”数据属性设置为false或true，从数据控制每个节点的外观变得很简单。

 diagram.nodeTemplate =
    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle",
        { // default values if the data.highlight is undefined:
          fill: "yellow", stroke: "orange", strokeWidth: 2 },        new go.Binding("fill", "highlight", function(v) { return v ? "pink" : "lightblue"; }),        new go.Binding("stroke", "highlight", function(v) { return v ? "red" : "blue"; }),        new go.Binding("strokeWidth", "highlight", function(v) { return v ? 3 : 1; })),
      $(go.TextBlock,
        { margin: 5 },        new go.Binding("text", "key"))
    );  var nodeDataArray = [
    { key: "Alpha", loc: "0 0", highlight: false },
    { key: "Beta", loc: "100 50", highlight: true },
    { key: "Gamma", loc: "0 100" }  // highlight property undefined: use defaults
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

请注意，转换函数只能返回属性值。您不能返回GraphObjects来替换零件可视树中的对象。如果需要根据绑定数据显示不同的GraphObject，则可以绑定GraphObject.visible或GraphObject.opacity属性。如果您确实想要不同的视觉结构，则可以使用多个模板（Template Maps）。

=====================================================

想要购买GoJS正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼