new go.Binding("text", "name")

`new go.Binding("text", "name")` 是 GoJS 库中的一种绑定（Binding），它用于将数据模型（通常是图表中的 Node、Shape 或 Link 的数据属性）与 UI 元素（通常是在图形界面中的文本框或标签）关联起来。这个特定的绑定表示：

- `"text"` 是目标，也就是 UI 控件上的属性名，比如一个 Label 或 TextBlock 的 `textContent`。
- `"name"` 是源，表示数据模型中的某个属性。

当你在 GoJS 中执行这个绑定，每次数据模型中的 `name` 属性发生变化时，UI 上绑定的 `text` 就会被自动更新为新的值。反之，如果用户直接修改 UI 控件的 `text`，GoJS 也能感知到这种变化并反映回数据模型。

例如，在创建 Node 的时候，可以这样应用这个绑定：

var node = diagram.addNode({
  location: ..., // 节点位置
  text: "",       // 默认文本
  binding: new go.Binding("text", "title").makeTwoWay(), // 绑定 title 到 text
  data: { title: 'Node Title' } // 数据模型
});

这会确保每当 `node.data.title` 变更时，相应的文本框会同步更新。同时，直接编辑文本框的内容也会导致 `title` 更新。

相关问题

go.js中new go.Binding("text", "name")绑定两个属性怎么写

在Go.js库中，`go.Binding`是一个用于数据绑定的强大工具，它允许你将模型数据和视图元素关联起来。当你写 `new go.Binding("text", "name")` 时，这意味着你想创建一个新的绑定，将"文本" (`text`) 属性绑定到另一个对象的"name"属性上。

具体来说，这行代码会实时更新文本框(`text`字段)的内容，每当源对象(`name`属性)的值改变时，文本框里的内容会自动跟随变化。这种绑定通常在`GraphObject`的初始化或后期修改时设置，例如：

var obj = new go.GraphObject({
  // 其他配置...
  text: "",
  bindings: [new go.Binding("text", "name").makeTwoWay()],

  // 或者在对象创建后动态绑定
  bind(nameModel): {
    this.bindings[0].toObject(nameModel);
  }
});

在这里，`makeTwoWay()`使得双向绑定，即不仅文本框的变化会影响`name`，`name`的变化也会影响文本框。如果不需要双向同步，可以省略这个选项。

go.js能生成含中间变量的平面树形结构吗

是的，GoJS 可以生成含有中间变量的平面树形结构。

GoJS 是一个功能强大的 JavaScript 库，用于创建交互式的图表和数据可视化应用程序。GoJS 提供了许多内置的布局算法和图形元素，可以轻松地创建平面树形结构，并支持自定义节点、连线和样式等。

下面是一个示例代码，可以根据你的需求进行修改：

// 创建画布
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv");

// 定义节点模板
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "white" }),
    $(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
  );

// 定义中间变量模板
myDiagram.nodeTemplateMap.add("Intermediate",
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
    $(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
  ));

// 定义边模板
myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.TextBlock, { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN, 5, 0) }, new go.Binding("text", "value"))
  );

// 定义数据
const data = [
  { key: "1", name: "1", isIntermediate: false, parent: "0" },
  { key: "2", name: "2", isIntermediate: false, parent: "1" },
  { key: "3", name: "3", isIntermediate: true, parent: "2" },
  { key: "4", name: "4", isIntermediate: false, parent: "2" },
  { key: "5", name: "5", isIntermediate: false, parent: "1" },
  { key: "6", name: "6", isIntermediate: false, parent: "5" },
  { key: "7", name: "7", isIntermediate: true, parent: "6" },
  { key: "8", name: "8", isIntermediate: false, parent: "6" }
];

// 创建模型
const model = $(go.TreeModel);
model.nodeKeyProperty = "key";
model.nodeDataArray = data;

// 设置布局
const layout = $(go.TreeLayout);
layout.angle = 90;
layout.layerSpacing = 80;
layout.nodeSpacing = 20;

// 绑定模型和布局
myDiagram.model = model;
myDiagram.layout = layout;

在这个示例代码中，首先创建一个画布，然后定义节点、边和中间变量的模板。接着定义数据，包括每个节点的名称、是否为中间变量以及父节点的键。然后创建模型，并绑定数据到模型中。最后设置布局，并绑定模型和布局到画布中。

值得注意的是，这个示例代码使用了 GoJS 内置的树形布局算法，可以根据需要进行自定义。同时，如果需要更加复杂的节点和连线样式，也可以进行自定义。