Javascript 动态设置“网格模板区域”时出现问题`

背景：我正在用vanilla JS编写一个应用程序，它可以动态生成和更新CSS网格属性。特别是，我对动态设置

网格模板区域

感兴趣。这个例子可能会很复杂，所以

---

预期行为：我能够在初始渲染时设置这些属性，而不会出现任何问题。其代码如下所示：

function GridMap(targetElement, { 
    aspectWidth, 
    aspectHeight, 
    density, 
    defaultTrackName = `x` 
}) {

    /* output: [`x x`, `x x`] */
    this.areaMap = Array.from(
        Array(aspectHeight)
            .map(() => `${defaultTrackName} `
                .repeat(aspectWidth)
                .trim()
            )
    )

    /* assign CSS grid properties to target element */
    this.targetElement.style.display = `grid`
    this.targetElement.style.gridTemplateAreas = this.areaMap
        .map(row => `"${row}"`) // output: [`"x x"`, `"x x"`]
        .join(` `) // output: `"x x" " x x"`
}

const target = document.getElementById(`target`)
const grid = new GridMap(target, {
    aspectWidth: 2,
    aspectHeight: 2,
    density: 1,
})

这将产生以下元素：

<div id="target" style="display: grid; grid-template-areas: "x x" "x x";"></div>

---

问题：上述代码在初始渲染时起作用。它将生成一个正确的元素，如上面所示。但是，当我尝试使用不同的（动态生成的）属性在之后执行此操作时，元素不会得到更新。从这一点上讲，很难隔离代码来给出一个好的示例，所以。这就是所讨论的代码的样子：

function Entity({ trackName, shape }) {
  this.trackName = trackName
  this.shape = shape
    .split(`\n`)
    .filter(track => track)
    .map(track => track.trim())
    .filter(track => track)
}

grid.placeEntity = function placeEntity(
    { x = 0, y = 0 },
    { shape, trackName },
  ) {
    let currentEntityRow = 0

    grid.areaMap = grid.areaMap.map((row, i) => {
      if (currentEntityRow < shape.length) {
        if (i >= y) {
          row = row.split(` `)
          row.splice(
            x,
            shape[currentEntityRow].split(` `).length,
            ...shape[currentEntityRow].split(` `).map(() => trackName),
          )

          row = row.join(` `)
          currentEntityRow += 1
        }
      }

      return row
    })

    grid.update()
}

const entity = new Entity({
    trackName: `entity`,
    shape: `
        o o
        o
    `
})

grid.placeEntity({ x = 1, y = 1 }, entity)

函数实体（{trackName，shape}）{
this.trackName=trackName
this.shape=shape
.split（`\n`）
.filter（轨迹=>轨迹）
.map（track=>track.trim（））
.filter（轨迹=>轨迹）
}
grid.placeEntity=函数placeEntity(
{x=0，y=0}，
{shape，trackName}，
) {
设currentEntityRow=0
grid.areaMap=grid.areaMap.map（（行，i）=>{
if（currentEntityRow<形状长度）{
如果（i>=y）{
行=行。拆分（``）
行拼接(
x,，
形状[currentEntityRow]。拆分（``）。长度，
…形状[currentEntityRow].split（``'）.map（（）=>trackName），
)
行=行。连接（``）
currentEntityRow+=1
}
}
返回行
})
grid.update（）
}
常量实体=新实体({
trackName:`entity`，
形状：`
o o
o
`
})
placeEntity（{x=1，y=1}，entity）

查看my中的控制台输出，您可以看到新的

grid.areaMap确实生成了。但由于某些原因，当尝试通过
grid.placeEntity（）
更新它时，更新不会反映在新渲染的元素中


我所尝试的：


摆脱整个
网格。placeEntity
调用并：

…直接将
element.style.gridTemplateAreas
设置为类似
“foo bar”“hello world”
这样的简单设置这与预期相符
…直接将
element.style.gridTemplateAreas
设置为与我在上述示例中生成的字符串完全相同的字符串这不起作用这告诉我如何生成
grid.areaMap
存在问题，但我不能指出这个问题

我发现了问题：命名的CSS网格轨迹必须始终相邻，并且必须始终形成矩形：

这是有道理的，但是这个项目要做的有点糟糕。我相信这里有一个解决办法

#grid {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);

  /* this isn't valid CSS */
  grid-template-areas:
    'entity-1 entity-2'
    'entity-2 entity-4';

  /* this is valid */
  grid-template-areas:
     'entity-1 entity-2'
     'entity-3 entity-4';
}