如何在Mustache文件中用if语句实现编辑页下拉框预选中？

Mustache是无逻辑模板引擎，你之前用的{{#if categoryIs "Option1"}}语法不生效，因为它不支持直接的值比较操作。下面给两种可行的解决办法：

方法1：提前在数据中添加布尔标记 #

在渲染editGoal模板之前，根据目标的category值，给数据对象添加对应的布尔属性。比如用JavaScript处理的话：

// 假设从后端获取的目标数据是goalData
const goalData = {
  category: "Option2", // 示例已有分类
  // 添加布尔标记
  isOption1: goalData.category === "Option1",
  isOption2: goalData.category === "Option2",
  isOption3: goalData.category === "Option3"
};

// 用这个goalData渲染模板

之后修改editGoal模板的下拉框代码：

<label for="category">Category</label>
<select id="category" name="category">
    <option value="Option1" {{#isOption1}}selected{{/isOption1}}>Option1</option>
    <option value="Option2" {{#isOption2}}selected{{/isOption2}}>Option2</option>
    <option value="Option3" {{#isOption3}}selected{{/isOption3}}>Option3</option>
</select>

方法2：使用Mustache Lambda（支持的环境下） #

如果你的Mustache运行环境支持lambda函数，可以定义一个比较函数传给模板，直接在模板里做值判断。比如：

const goalData = {
  category: "Option3",
  // 定义lambda函数，比较当前分类和传入值
  isCategory: function(option) {
    return this.category === option ? "selected" : "";
  }
};

模板代码改成：

<label for="category">Category</label>
<select id="category" name="category">
    <option value="Option1" {{#isCategory}}Option1{{/isCategory}}>Option1</option>
    <option value="Option2" {{#isCategory}}Option2{{/isCategory}}>Option2</option>
    <option value="Option3" {{#isCategory}}Option3{{/isCategory}}>Option3</option>
</select>

方法1更通用，不管什么语言的后端都能实现；方法2适合支持lambda的环境，代码更简洁。

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