MustacheJS 不渲染调用其他函数的函数的值

Question

我有一个简单的 MustacheJS 模板：

<script id="myTpl" type="text/template">
  <div id="metrics">
    <div>
      <p>Votes: {{ votes.total }}</p>
      <p>Men: {{ votes.men }}</p>
      <p>Women: {{ votes.women }}</p>
      <p>Unknowns: {{ votes.unknown }}</p>
    </div>
  </div>

</script>

<div id="container">
</div>

还有一个JavaScript代码：

var data = {
  votes: {
    total: function() {
      return this.voters.men.length + this.voters.women.length + this.voters.unknown.length;
      //return this.votes.men() + this.votes.women() + this.votes.unknown();
    },
    men: function() {
      return this.voters.men.length;
    },
    women: function() {
      return this.voters.women.length;
    },
    unknown: function() {
      return this.voters.unknown.length;
    }
  },
  voters: {
    men: [
      "hpiotrekh",
      "goferek",
      "Carlos_Irwin_Estevez",
      "Nemezis_"
    ],
    women: [],
    unknown: [
      "komurczak",
      "PLDami"
    ]
  }
}

var template = $('#myTpl').html();
var html = Mustache.to_html(template, data);
$('#container').html(html);

在 votes.total 函数中的第二个 return 语句被注释的情况下，我们使用该函数的第一个 return 一切正常。但是当我尝试使用第二个 return 语句，该语句使用它所属对象的函数时，代码不会呈现。

我不明白为什么。

现场演示https://jsfiddle.net/bxgnd7ch/

只需注释第 4 行并取消注释第 5 行。

Answer 1

此错误由函数上下文更改引起，实际问题是您正在通过调用方调用对象函数this.votes

总计()函数

this.voters.men.length + this.voters.women.length + this.voters.unknown.length;

上下文 this 指向 data

问题是：

return this.votes.men() + this.votes.women() + this.votes.unknown()

你调用了 this.votes.men() 调用者 this.votes，上下文 this 指向 data.votes 所以 men/women/unknown 函数中的上下文

this === data.votes

这就是为什么当 men() 函数试图访问

this.voters.men.length

它实际上正在访问 data.votes.voters.men.length

但您希望访问 data.voters.men.length

所以这导致了错误。

解决方案：

尝试从 data 对象中提取 voters，如果你真的必须在对象函数内部调用对象函数

会是这样的： https://jsfiddle.net/bxgnd7ch/3/

MustacheJS 不渲染调用其他函数的函数的值

MustacheJS doesn't render values of functions calling other functions

javascript

templates

mustache

解决方案：