Question

我有这个模板：

＆＃xA;＆＃xA;

 ＆lt; template is =“dom-repeat”items =“[[faq]]”＆gt;＆＃xA ; ＆lt; div class =“container”＆gt;＆＃xA; ＆lt; div class =“question”＆gt; [[item.question]]＆lt; / div＆gt;＆＃xA; ＆lt; div class =“answer”＆gt; [[item.answer]]＆lt; / div＆gt;＆＃xA; ＆lt; / div＆gt;＆＃xA;＆lt; / template＆gt;＆＃xA;

＆＃xA;＆＃xA;

我有一个 item.answer 包含链接到另一个页面的HTML锚点的字符串。此＆lt; a＆gt;＆lt; / a＆gt; 只是在网页上呈现为文字。我尝试了一个简单的＆lt; br＆gt; ，这也呈现为文本。

＆＃xA;＆＃xA;

是否可以使字符串数据绑定呈现其内容作为HTML？如果没有，我怎么还能链接到其他东西？

＆＃xA;

Answer 1

有些自定义元素支持从字符串属性呈现HTML，包括<juicy-html>。

<template is="juicy-html" content$="[[item.answer]]"></template>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      html: {
        type: String,
        value: '<a href="#/baz">baz</a><br><a href="#/qux">qux</a>'
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/juicy-html+juicy+:v1.0.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="juicy-html/juicy-html.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="juicy-html" content$="[[html]]"></template>
    </template>
  </dom-module>
</body>

codepen

您还可以使用绑定到元素innerHTML的hacky变通方法：

<div inner-h-t-m-l="[[item.answer]]"></div>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      html: {
        type: String,
        value: '<a href="#/foo">foo</a><br><a href="#/bar">bar</a>'
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <div inner-h-t-m-l="[[html]]"></div>
    </template>
  </dom-module>
</body>

codepen

Answer 2

不能以可以应用于任何标签的方式实施dom-repeat，例如：

<li is="dom-repeat" items="...">

这不仅可以解决这个问题，而且可以使最终的DOM变得更简单，即DOM中没有额外的节点。

我理解将dom-repeat应用于任何标签的能力在性能方面可能不是一个好主意，但也许这可以通过额外的声明来解决？就像：

<template>
  <ol>
    <li is="dom-repeat" items="...">
  </ol>
  <div class="footer" is="dom-if" if="{{showFooter}}">(...)</div>
</template>

<script>
  Polymer({
      is: "my-element",

      extendedElements: ['li', '.footer', 'another css selector'],

      (...)
<script>

然后，Polymer需要检查与extendedElements选择器之一匹配的元素的is属性。

我想这可以应用于dom-if和可能还有其他扩展。

字符串数据绑定是否可以呈现其HTML内容？

2 个答案: