如何在不同模板控制器间传递产品ID并实现模板切换？

我来帮你搞定这个问题！不用依赖URL重定向，咱们可以通过几种简单的方式实现模板切换和跨控制器的产品ID传递，下面是具体的方案和代码示例：

方案1：直接通过事件传递ID（最直观的方式） #

这种方式适合简单场景，点击产品项时直接获取ID，切换模板后调用详情控制器的方法并传入ID。

第一步：HTML结构 #

先把两个模板的结构写好，给产品项加上data-product-id属性存储ID：

<!-- 产品列表模板 -->
<div id="product-list" class="template active">
  <h2>产品列表</h2>
  <div class="product-item" data-product-id="1">无线耳机</div>
  <div class="product-item" data-product-id="2">智能手表</div>
  <div class="product-item" data-product-id="3">平板电脑</div>
</div>

<!-- 产品详情模板 -->
<div id="product-details" class="template">
  <h2>产品详情</h2>
  <div id="product-content"></div>
</div>

第二步：基础CSS（控制模板显示/隐藏） #

用CSS类来管理模板的可见性：

.template {
  display: none;
}
.template.active {
  display: block;
}

第三步：JS控制器实现 #

把列表和详情的逻辑拆分成两个控制器，点击时直接传递ID：

// 产品列表控制器
const ProductListController = {
  init() {
    // 给每个产品项绑定点击事件
    document.querySelectorAll('.product-item').forEach(item => {
      item.addEventListener('click', (e) => {
        // 获取当前点击产品的ID
        const productId = e.target.dataset.productId;
        
        // 切换模板显示状态
        document.getElementById('product-list').classList.remove('active');
        document.getElementById('product-details').classList.add('active');
        
        // 调用详情控制器的加载方法，传入ID
        ProductDetailsController.loadProduct(productId);
      });
    });
  }
};

// 产品详情控制器
const ProductDetailsController = {
  loadProduct(productId) {
    // 这里可以替换成真实的API请求，现在用模拟数据演示
    const productData = this.getMockProductData(productId);
    
    // 渲染详情内容
    document.getElementById('product-content').innerHTML = `
      <p>ID：${productData.id}</p>
      <p>名称：${productData.name}</p>
      <p>价格：¥${productData.price}</p>
      <p>描述：${productData.desc}</p>
    `;
  },
  // 模拟产品数据源
  getMockProductData(id) {
    const products = [
      {id: '1', name: '无线耳机', price: 299, desc: '主动降噪，续航24小时'},
      {id: '2', name: '智能手表', price: 1299, desc: '心率监测，血氧检测'},
      {id: '3', name: '平板电脑', price: 3999, desc: '10.9英寸屏幕，M1芯片'}
    ];
    return products.find(p => p.id === id);
  }
};

// 初始化列表控制器
ProductListController.init();

方案2：全局状态存储（适合复杂场景） #

如果你的项目逻辑更复杂，多个控制器需要共享状态，可以用一个全局对象来存储当前选中的产品ID，这样各个控制器都能访问到。

修改后的JS代码 #

// 全局状态管理对象
const AppState = {
  currentProductId: null,
  setProductId(id) {
    this.currentProductId = id;
  },
  getProductId() {
    return this.currentProductId;
  }
};

// 产品列表控制器
const ProductListController = {
  init() {
    document.querySelectorAll('.product-item').forEach(item => {
      item.addEventListener('click', () => {
        const productId = item.dataset.productId;
        // 把ID存入全局状态
        AppState.setProductId(productId);
        // 切换模板
        document.getElementById('product-list').classList.remove('active');
        document.getElementById('product-details').classList.add('active');
        // 初始化详情控制器
        ProductDetailsController.init();
      });
    });
  }
};

// 产品详情控制器
const ProductDetailsController = {
  init() {
    // 从全局状态获取ID
    const productId = AppState.getProductId();
    if (!productId) return;
    this.loadProduct(productId);
  },
  loadProduct(productId) {
    // 同方案1的渲染逻辑...
    const productData = this.getMockProductData(productId);
    document.getElementById('product-content').innerHTML = `
      <p>ID：${productData.id}</p>
      <p>名称：${productData.name}</p>
      <p>价格：¥${productData.price}</p>
      <p>描述：${productData.desc}</p>
    `;
  },
  getMockProductData(id) {
    // 同方案1的模拟数据...
    const products = [
      {id: '1', name: '无线耳机', price: 299, desc: '主动降噪，续航24小时'},
      {id: '2', name: '智能手表', price: 1299, desc: '心率监测，血氧检测'},
      {id: '3', name: '平板电脑', price: 3999, desc: '10.9英寸屏幕，M1芯片'}
    ];
    return products.find(p => p.id === id);
  }
};

// 初始化两个控制器
ProductListController.init();
ProductDetailsController.init();

方案3：自定义事件（控制器解耦） #

如果想让两个控制器完全解耦，不用直接调用对方的方法，可以用自定义事件来传递ID，这样列表控制器只负责触发事件，详情控制器负责监听事件。

修改后的JS代码 #

// 产品列表控制器
const ProductListController = {
  init() {
    document.querySelectorAll('.product-item').forEach(item => {
      item.addEventListener('click', (e) => {
        const productId = e.target.dataset.productId;
        // 切换模板
        document.getElementById('product-list').classList.remove('active');
        document.getElementById('product-details').classList.add('active');
        // 触发自定义事件，携带产品ID
        window.dispatchEvent(new CustomEvent('productSelected', { 
          detail: { productId } 
        }));
      });
    });
  }
};

// 产品详情控制器
const ProductDetailsController = {
  init() {
    // 监听自定义事件
    window.addEventListener('productSelected', (e) => {
      const productId = e.detail.productId;
      this.loadProduct(productId);
    });
  },
  loadProduct(productId) {
    // 同方案1的渲染逻辑...
    const productData = this.getMockProductData(productId);
    document.getElementById('product-content').innerHTML = `
      <p>ID：${productData.id}</p>
      <p>名称：${productData.name}</p>
      <p>价格：¥${productData.price}</p>
      <p>描述：${productData.desc}</p>
    `;
  },
  getMockProductData(id) {
    // 同方案1的模拟数据...
    const products = [
      {id: '1', name: '无线耳机', price: 299, desc: '主动降噪，续航24小时'},
      {id: '2', name: '智能手表', price: 1299, desc: '心率监测，血氧检测'},
      {id: '3', name: '平板电脑', price: 3999, desc: '10.9英寸屏幕，M1芯片'}
    ];
    return products.find(p => p.id === id);
  }
};

// 初始化两个控制器
ProductListController.init();
ProductDetailsController.init();

总结 #

这三种方案都能实现无需全页重定向的模板切换和ID传递：

• 如果是简单项目，用方案1最直接；
• 如果需要多控制器共享状态，选方案2；
• 如果想让控制器之间解耦，用方案3更合适。

内容的提问来源于stack exchange，提问作者The Vanilla Thrilla