0

我使用 javascript 和 jQuery 来呈现闭包模板（大豆模板）。我正在关注它的hello world示例。
我的jsfiddle在这里。

如示例中所述，以下代码有效，

document.write(soy.examples.simple.helloWorld());

& 提供

你好世界！

但是当与 jQuery 一起使用动态插入闭包模板的内容时，它总是返回空，没有附加任何内容。 $('#withoutContent').append(soy.examples.simple.helloWorld());


具有讽刺意味的是，进一步看，以下 jQuery 可以正常工作

$('#withContent').append(soy.examples.simple.helloWorld().content);


我在从非常旧版本的闭包模板升级时遇到了这个问题。我们有很多这样的模板，在 javascript 中更新每个模板的用法.content很麻烦且容易出错。
为什么 jQuery 不能正确获取模板的内容？

4

1 回答 1

1

为什么 jQuery 不能正确获取模板的内容？

调用soy.examples.simple.helloWorld()返回此对象：

{
  constructor: function(){goog$soy$data$SanitizedContent.call(this)},
  content: "Hello world!",
  contentDir: null,
  contentKind: { ... },
  getContent: function(){return this.content},
  toString: function(){return this.content}
}

如您所见，它不是 HTML，它有几个属性和方法——其中一个toString()是.content.

document.write()需要一个字符串参数。如果您传递其他东西（例如上面的对象），那么它会.toString()自动调用您。这就是为什么

document.write(soy.examples.simple.helloWorld());

作品。

jQuery$.append()接受所有类型的东西——纯字符串、单个 DOM 节点、DOM 节点列表、其他 jQuery 对象、函数——并为每个参数类型做适当的事情。但是为了换取这种灵活性，它不会简单地将其参数转换为字符串。一些 jQuery 无法识别的随机对象将被丢弃。这就是为什么

$('#withoutContent').append(soy.examples.simple.helloWorld());

不起作用。

在 javascript 中更新每个人的使用以使用 .content 很麻烦且容易出错。

如果您可以输入$('...').append()所有这些位置，那么您可以输入.content所有这些位置。

于 2020-10-29T06:31:07.497 回答