解决方案：

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);

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

我无法理解为什么。

现场演示related link

只需评论第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.men()调用this.votes，上下文this指向data.votes 所以男/女/未知功能的背景

this === data.votes

这就是为什么men（）函数试图访问时的原因

this.voters.men.length

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

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

所以这会导致错误。

解决方案：

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

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

MustacheJS不呈现调用其他函数的函数值

1 个答案:

解决方案：