如何用Mustache模板遍历对象内的facility数组进行渲染？

你的核心需求是基于包含facility数组的数据对象，渲染对应数量的表单（支持单个/多个元素），下面针对模板匹配问题给出解决方案：

基础模板的正确性说明 #

你当前的模板语法其实是符合Mustache规则的：

{{#facility}}
<form hx-put="/facility/{{ID}}">
  <div>
    <label>Name</label>
    <input type="text" name="Name" value="{{Name}}">
  </div>
  <div>
    <label>Region</label>
    <input type="text" name="RegionID" value="{{RegionID}}">
  </div>
</form>
{{/facility}}

{{#facility}}作为区块标签，当facility是数组时，会自动遍历数组里的每个对象，把每个对象作为上下文渲染内部表单，完全支持单个或多个元素的场景。

常见匹配问题的调整方案 #

如果出现数据不匹配的情况，大概率是以下场景导致的，对应调整方式如下：

1. 需要处理空数组的情况 #

如果facility数组为空，默认不会渲染任何内容。要是需要在空数组时显示提示文本，可以添加反向区块标签{{^facility}}：

{{#facility}}
<form hx-put="/facility/{{ID}}">
  <div>
    <label>Name</label>
    <input type="text" name="Name" value="{{Name}}">
  </div>
  <div>
    <label>Region</label>
    <input type="text" name="RegionID" value="{{RegionID}}">
  </div>
</form>
{{/facility}}
{{^facility}}
<p>暂无设施数据</p>
{{/facility}}

2. 确保渲染时传入完整的顶层对象 #

必须保证传给Mustache的渲染数据是包含facility键的完整顶层对象，而不是直接传入facility数组。举个JavaScript的例子：

// 正确：传入完整对象
const data = {"facility":[{"ID":"A1A123","Name":" Anytown Health Centre PHCY","RegionID":1}]};
Mustache.render(template, data);

// 错误：只传数组，模板里的{{#facility}}会找不到对应键
Mustache.render(template, data.facility);

3. 处理数组元素为空的情况 #

如果数组里存在空对象或null值，可以在区块内加一层条件判断（利用Mustache的真值判断特性）：

{{#facility}}
  {{#ID}}
  <form hx-put="/facility/{{ID}}">
    <div>
      <label>Name</label>
      <input type="text" name="Name" value="{{Name}}">
    </div>
    <div>
      <label>Region</label>
      <input type="text" name="RegionID" value="{{RegionID}}">
    </div>
  </form>
  {{/ID}}
{{/facility}}

这样只有当元素存在ID字段时，才会渲染对应的表单。

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