在聚合物模板属性中使用 HTML答案

【问题标题】：using HTML in polymer template attributes在聚合物模板属性中使用 HTML
【发布时间】：2014-10-02 12:53:28
【问题描述】：

考虑一下这个聚合物元素

<polymer-element name="my-card" attributes="title content">
  <template> 
    <div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
        <paper-shadow z="1">
                <div class="row">
                    <div class="col-xs-12" style="margin-top:-20px"><h2>{{title}}</h2></div>
                </div>
                <hr/>
                <div class="row">
                    <div class="col-xs-12">{{content}}</p></div>
                </div>
            <paper-ripple fit></paper-ripple>
        </paper-shadow>
    </div>
  </template>   
  <script>
  Polymer({
    cardTapped: function(){
      alert('tapped!');
    }
  });
  </script>
</polymer-element>

这就是我的使用方式

  <my-card content="this is a test body" title="Here is a nice Title"></my-card>

它可以工作，但是当我在内容属性中使用 html 时，比如

  <my-card content="this is a test body <p>with paragraphs</p>" title="Here is a nice Title"></my-card>

它们像文本一样被处理，有没有办法将 HTML 代码传递给属性并将其嵌入到聚合物模板中

【问题讨论】：

标签： html polymer

【解决方案1】：

我认为您真正想要的是在您的<template> 中使用<content></content> insertion point，而不是创建一个名为content 的属性并使用变量插值。

这是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer Demo</title>
  </head>
  <body>
    <script src="//www.polymer-project.org/platform.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-shadow/paper-shadow.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
  
    <polymer-element name="my-card" attributes="title">
      <template> 
        <div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
          <paper-shadow z="1">
            <div class="row">
              <div class="col-xs-12" style="margin-top:-20px">
                <h2>{{title}}</h2>
              </div>
            </div>
            <hr/>
            <div class="row">
              <div class="col-xs-12">
                <content></content>
              </div>
            </div>
            <paper-ripple fit></paper-ripple>
          </paper-shadow>
        </div>
      </template>
    
      <script>
        Polymer({
          cardTapped: function(e) {
            console.log('tapped!', e);
          }
        });
      </script>
    </polymer-element>
  
    <my-card title="Here is a nice Title">
      this is a test body <p>with paragraphs</p>
    </my-card>
  </body>
</html>

【讨论】：