两种方式绑定的数据在 Polymer 中显示为字符串

Question

我正在尝试使用以下代码渲染聚合物模板，

const shadowRoot = this.attachShadow({mode: 'open'});
const htmlTemplate = importDoc.querySelector('template');
shadowRoot.innerHTML = htmlTemplate.innerHTML;

但这也将双向绑定数据呈现为字符串，而不是显示绑定值，例如

<h1 id ="contactFooter">{{localize('_testVal')}}</h1>

按原样显示有人知道吗？双向绑定只是示例，它呈现所有内容。

Answer 1

要使用 <template> 标签，您应该在 content 上使用 importNode。

例如

var clone = document.importNode(htmlTemplate.content, true);
shadowRoot.appendChild(clone); 
// note that you will need to clear the shadowRoot if you do rerenderings
// OR you could try
shadowRoot.innerHTML = htmlTemplate.content;

在此处查看更多详细信息https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

两种方式绑定的数据在 Polymer 中显示为字符串

Two way binded data appears as string in Polymer

ecmascript-6

polymer-2.x