javascript - 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调用对象函数

在total()函数中

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。投票所以男人/女人/未知函数中的上下文

this === data.votes

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

this.voters.men.length

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

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

所以这会导致错误。

解决方案:

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

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