如何基于Handlebars实现单内容展示及按钮切换功能？

嘿，这个需求挺常见的，我给你整理了两个实用的实现思路，你可以根据自己的项目场景选：

方案一：渲染全部内容 + JS控制显隐（简单易上手） #

这个思路是先用Handlebars把所有内容都渲染出来，然后通过CSS隐藏，再用JS控制点击按钮时切换显示的内容。优点是不用频繁操作模板渲染，适合数据量不大的场景。

步骤： #

1. 修改Handlebars模板：
   给每个循环出来的div-box加一个统一的类（比如content-box），同时用@index给每个元素加自定义属性存索引，方便后续JS定位。默认只显示第一个内容。

   <!-- 模板部分 -->
   <div class="content-container">
     {{#each yourDataList}}
       <div class="content-box {{#if @first}}active{{/if}}" data-index="{{@index}}">
         <!-- 你的内容示例 -->
         <h3>{{title}}</h3>
         <p>{{description}}</p>
       </div>
     {{/each}}
   </div>
   
   <!-- 右下角切换按钮 -->
   <button id="nextBtn">下一个</button>
   <button id="prevBtn" disabled>上一个</button>
   

2. 添加CSS样式：
   让非激活状态的内容隐藏，激活状态的显示：

   .content-box {
     display: none;
     padding: 1rem;
     border: 1px solid #eee;
     margin-bottom: 1rem;
   }
   .content-box.active {
     display: block;
   }
   

3. 写JS交互逻辑：
   维护当前显示的索引，点击按钮时切换激活状态，同时处理按钮禁用逻辑：

   const contentBoxes = document.querySelectorAll('.content-box');
   const nextBtn = document.getElementById('nextBtn');
   const prevBtn = document.getElementById('prevBtn');
   let currentIndex = 0;
   
   // 切换内容的核心函数
   function switchContent(newIndex) {
     contentBoxes[currentIndex].classList.remove('active');
     contentBoxes[newIndex].classList.add('active');
     currentIndex = newIndex;
     // 更新按钮禁用状态
     prevBtn.disabled = currentIndex === 0;
     nextBtn.disabled = currentIndex === contentBoxes.length - 1;
   }
   
   // 下一个按钮事件
   nextBtn.addEventListener('click', () => {
     if (currentIndex < contentBoxes.length - 1) {
       switchContent(currentIndex + 1);
     }
   });
   
   // 上一个按钮事件
   prevBtn.addEventListener('click', () => {
     if (currentIndex > 0) {
       switchContent(currentIndex - 1);
     }
   });
   

方案二：动态渲染当前内容（适合大数据量） #

如果你的数据量很大，全部渲染出来会占用过多DOM资源，那就可以用这个思路：每次只渲染当前索引对应的内容，点击按钮时重新渲染模板片段。

步骤： #

1. 准备基础模板：
   写一个渲染单条内容的模板片段（用Handlebars的inline partial更方便）：

   <!-- 主模板 -->
   <div class="content-container" id="contentContainer">
     {{> singleContent currentItem}}
   </div>
   
   <!-- 单条内容的inline partial -->
   {{#*inline "singleContent"}}
     <div class="content-box">
       <h3>{{title}}</h3>
       <p>{{description}}</p>
     </div>
   {{/inline}}
   
   <!-- 切换按钮 -->
   <button id="nextBtn">下一个</button>
   <button id="prevBtn" disabled>上一个</button>
   

2. JS动态渲染逻辑：
   维护当前索引，点击按钮时更新索引，重新调用Handlebars渲染当前内容：

   // 假设你的原始数据数组
   const yourDataList = [/* 你的数据集合 */];
   const contentContainer = document.getElementById('contentContainer');
   const nextBtn = document.getElementById('nextBtn');
   const prevBtn = document.getElementById('prevBtn');
   let currentIndex = 0;
   
   // 预编译Handlebars模板（需确保已引入Handlebars库）
   const template = Handlebars.compile(document.getElementById('yourTemplateId').innerHTML);
   
   // 渲染当前内容的函数
   function renderCurrentContent() {
     const currentItem = yourDataList[currentIndex];
     contentContainer.innerHTML = template({ currentItem });
     // 更新按钮状态
     prevBtn.disabled = currentIndex === 0;
     nextBtn.disabled = currentIndex === yourDataList.length - 1;
   }
   
   // 初始化渲染第一个内容
   renderCurrentContent();
   
   // 按钮点击事件
   nextBtn.addEventListener('click', () => {
     if (currentIndex < yourDataList.length - 1) {
       currentIndex++;
       renderCurrentContent();
     }
   });
   
   prevBtn.addEventListener('click', () => {
     if (currentIndex > 0) {
       currentIndex--;
       renderCurrentContent();
     }
   });
   

额外优化小技巧 #

• 可以给切换加过渡动画，比如给.content-box加opacity: 0; transition: opacity 0.3s;，激活时设opacity: 1;，体验更丝滑。
• 如果只需要“下一个”按钮，还可以做成循环切换：到最后一个内容时，点击按钮回到第一个。

内容的提问来源于stack exchange，提问作者ipid