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 的情况下，一切正常。但是当我尝试使用第二个使用它所属对象的函数的返回语句时，代码不会呈现。

我不明白为什么。

现场演示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 调用了this.votes.men()，上下文this 指向data.votes 所以男性/女性/未知功能中的上下文

this === data.votes

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

this.voters.men.length

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

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

所以这会导致错误。

解决方案：

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

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