如何在Mustache模板中忽略父上下文继承的属性？

这个问题我之前也碰到过，Mustache的上下文向上查找特性确实有时候会带来意料之外的结果——当当前上下文没有指定属性时，它会自动遍历父级上下文找同名属性，所以才会出现Clare的条目继承了Alice的age的情况。下面给你几个实用的解决办法：

方法1：利用Mustache的存在性条件渲染 #

Mustache会自动判断属性是否存在，我们可以在子上下文里给age的渲染加上条件，只有当前对象确实有age属性时才显示这部分内容：

修改后的模板代码：

<p>{{name}} (age {{age}})</p>
<ul>
  {{#children}}
    <li>{{name}}
      {{#age}}
        (age {{age}})
      {{/age}}
    </li>
  {{/children}}
</ul>

这样渲染后，Clare的条目就只会显示Clare，不会带上父级的age 45了。

方法2：预处理数据（最直观的方案） #

如果你的业务场景允许，在把数据传给Mustache渲染之前，给没有age属性的子对象显式设置age为null或者空字符串。因为当属性存在但值为空时，Mustache不会再向上查找父级的同名属性：

处理后的示例数据：

{ 
  "name": "Alice", 
  "age": 45, 
  "children": [ 
    { "name": "Bob", "age": 11 }, 
    { "name": "Clare", "age": null } 
  ] 
}

用你原来的模板渲染，Clare的age部分就会是空的，不会继承父级的45。

方法3：使用Lambda函数实现精确控制（进阶方案） #

如果需要更灵活的属性检查逻辑，可以用Lambda函数来判断当前上下文对象是否自身拥有该属性（而不是继承来的），比如在JavaScript环境中：

首先定义带Lambda的数据：

const templateData = {
  name: "Alice",
  age: 45,
  children: [ { name: "Bob", age: 11 }, { name: "Clare" } ],
  checkCurrentProp: function() {
    return function(propName, render) {
      // 检查当前上下文对象是否自身拥有该属性
      if (this.hasOwnProperty(propName)) {
        return render(propName);
      }
      return '';
    };
  }
};

然后对应的模板：

<p>{{name}} (age {{age}})</p>
<ul>
  {{#children}}
    <li>{{name}} (age {{#checkCurrentProp}}age{{/checkCurrentProp}})</li>
  {{/children}}
</ul>

这个Lambda函数会精准判断当前对象是否有自己的age属性，只有存在时才渲染，完全避免了父级属性的干扰。

内容的提问来源于stack exchange，提问作者Jindřich Mynarz