如何使用Handlebars.JS正确编写If/Else语句实现按钮文本动态切换

问题核心原因 #

1. Handlebars 属于静态模板引擎，仅在页面加载时编译渲染一次，后续修改 JavaScript 变量 report_form_opened 的值不会自动触发模板重新渲染，因此按钮文本不会跟着变量动态变化。
2. 变量初始化逻辑错误：var report_form_opened = report_form_opened; 相当于把未定义的变量赋值给自身，初始值为 undefined，转换为布尔值是 false，因此 Handlebars 首次渲染时会走 {{else}} 分支，按钮默认显示「Close」，和你遇到的现象一致。
3. 额外小问题：你当前在 toggleReportForm 中打印的是函数本身 console.log(toggleReportForm)，不是变量值，无法正确输出状态；同时代码末尾有多余的 }); 闭合符号，可能引发语法异常。

解决方案 #

这个场景逻辑非常简单，不需要强制依赖 Handlebars 做动态更新，直接在切换函数里手动修改按钮文本即可，修改后的代码如下：

修正JS逻辑

// 初始化表单默认关闭状态，按钮初始显示「Report A Problem」
var report_form_opened = false;

function toggleReportForm() {
  report_form_opened = !report_form_opened;
  // 手动更新按钮文本
  const reportBtn = document.getElementById('myBtnToReportABug');
  reportBtn.innerText = report_form_opened ? 'Close' : 'Report A Problem';
  // 打印状态变量，而非函数本身
  console.log(report_form_opened);
}

// clears text field onclick
function clearFields() {
  document.getElementById("nameInput").value = "";
}

$(document).ready(function() {
  const client = ZAFClient.init();
  
  $("#myBtnToReportABug").click(() => collapse.collapse('toggle'));

  $("#bugForm").submit((e) => {
    e.preventDefault()
    const input = document.getElementById('nameInput');
    bugInfo = {
      "name": "Report From " + idTicket,
      "story_type" : "Bug",
      "description": input.value + " " + `${data.ticket.brand.url}/agent/tickets/${idTicket}`,
    }
    reportBug(bugInfo).then(collapse.collapse('toggle'))
  })
});

async function reportBug(data = {}) {
  const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories'
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      "X-TrackerToken": `${metadata.settings.token}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

修正按钮HTML

直接去掉Handlebars语法，写初始文本即可：

<button id="myBtnToReportABug" onclick="toggleReportForm(); clearFields();" type="button" class="btn btn-secondary float-right">Report A Problem</button>

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