如何用多个文本视图填充列表视图中的多个数据？

// 假设用户数组为 users，每个用户有 name 和 age 两个属性
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

// 列表视图组件
class ListView {
  constructor() {
    this.textViews = []; // 存储文本视图实例的数组
  }

  addTextView(textView) {
    this.textViews.push(textView);
  }

  render() {
    const container = document.getElementById('list-view-container');

    // 清空容器
    container.innerHTML = '';

    // 遍历文本视图实例数组，将每个实例添加到容器中
    this.textViews.forEach(textView => {
      container.appendChild(textView.render());
    });
  }
}

// 文本视图组件
class TextView {
  constructor(data) {
    this.data = data;
  }

  render() {
    const element = document.createElement('div');
    element.textContent = `Name: ${this.data.name}, Age: ${this.data.age}`;
    return element;
  }
}

// 创建列表视图实例
const listView = new ListView();

// 遍历用户数组，为每个用户创建文本视图实例，并添加到列表视图中
users.forEach(user => {
  const textView = new TextView(user);
  listView.addTextView(textView);
});

// 渲染列表视图
listView.render();