一文详解GoJs中go.Panel的itemArray属性

当我们在使用GoJS的时候，很多时候我们都需要使用Panel这个类来进行布局，而Panel类中一个非常重要的属性是itemArray。本文将详细说明itemArray的作用与用法。

什么是itemArray

在Panel中可以添加的子控件称为item。Panel的item数组属性就是指定了所有添加到该Panel中的子控件，也就是item的数组。itemArray就是指定Panel中所有子控件的数组。我们可以通过设置itemArray属性的值来动态的添加和移除Panel的子控件，从而实现面板的动态布局。

itemArray的用法

当我们想往Panel中加入子控件的时候，我们可以使用go.Panel类中的add方法，也可以直接设置itemArray属性的值。下面是直接设置itemArray属性的一个示例：

$(go.Panel, "Table", {
  itemArray: [
    $(go.TextBlock, "Item 1"),
    $(go.TextBlock, "Item 2"),
    $(go.TextBlock, "Item 3")
  ],
  defaultAlignment: go.Spot.Left
})

在这个示例中，我们创建了一个Table类型的Panel，其包含三个文本块。我们可以通过设置itemArray属性来动态地变更这个Panel的子控件。现在，让我们再来给这个Panel中的文本块都添加一个Click事件：

$(go.Panel, "Table", {
  itemArray: [
    $(go.TextBlock, "Item 1").click(function(e, obj) {
      console.log("Clicked: " + obj.text)
    }),
    $(go.TextBlock, "Item 2").click(function(e, obj) {
      console.log("Clicked: " + obj.text)
    }),
    $(go.TextBlock, "Item 3").click(function(e, obj) {
      console.log("Clicked: " + obj.text)
    })
  ],
  defaultAlignment: go.Spot.Left
})

我们在每个文本块对象后添加了一个click事件，并打印出了对应的文本内容。现在，点击每个文本块后，控制台都会显示出相应的内容。

itemArray的应用场景

通过itemArray属性，我们可以在运行时动态地向Panel中添加或者移除子元素。这个属性特别适用于动态布局的场景中，比如我们要动态地根据数据条目来填充一个列表或表格，或者我们需要传递动态数据来控制Panel中的元素。

例如，我们可以用一个模板字符串来动态创建一组列表元素：

function createDataPanelTemplate(data) {
  var itemArray = [];
  for (var i = 0; i < data.length; i++) {
    var item = $(go.Panel, "Horizontal", {
      margin: new go.Margin(0, 5),
      itemArray: [
        $(go.TextBlock, data[i].name),
        $(go.TextBlock, data[i].value)
      ]
    });
    itemArray.push(item);
  }

  return $(go.Panel, "Vertical", {
    itemArray: itemArray
  });
}

在这个示例中，我们循环遍历了一个数据数组来创建多个子元素，并将它们加入到指定Panel的itemArray属性中。

总之，itemArray属性是Panel中非常强大的特性，通过它我们可以快速实现复杂的动态布局。