为什么车把模板中的修剪字符串不呈现？

Question

谁能解释为什么在以下示例中typeof result 返回string 时，result 在控制台中打印为[object Object]？

我从车把文档的最底部举了这个例子： https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access

我认为这可能与车把不允许访问 aString 原型的 toString 方法这一事实有关，但如果文档正确，这应该可以工作。

var template = Handlebars.compile(document.getElementById('template').innerHTML);

var result = template({ aString: "  abc  " }, {
    allowedProtoMethods: {
      trim: true
    }
  });

console.log(result, typeof result);

document.getElementById('output').innerHTML = result;

<script src="https://unpkg.com/handlebars@latest/dist/handlebars.js"></script>

<div id="output"></div>
<script type="template/handlebars" id="template">{{aString.trim}}</script>

Answer 1

这本质上是一个典型的“丢失this”问题。当车把评估aString.trim 时，它会返回对String.prototype.trim 的引用。此时与aString 的“连接”丢失，trim 不知道要对哪个值进行操作。

这可以通过使用自定义对象 + 方法复制来演示：

var template = Handlebars.compile(document.getElementById('template').innerHTML);

var result = template({
  foo: { 
    data: "data",
    getData() { return this.data || 'not found'},
    staticData() { return 'static data'; }
  },
});

document.getElementById('output').innerHTML = result;

<script src="https://unpkg.com/handlebars@latest/dist/handlebars.js"></script>

<div id="output"></div>
<script type="template/handlebars" id="template">{{foo.getData}} {{foo.staticData}}</script>

看看它如何呈现not found 而不是data？那是因为this 指的是foo 中的对象，它指的是别的东西（可能是全局对象）。

换句话说，您似乎无法以这种方式调用依赖于this 的方法。

您可以改用helper。