CODEWITHSUNDEEP
htmlpolymer
lowcoupling
lowcoupling

Reputation: 2169

using HTML in polymer template attributes

Consider this polymer-element

<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>

this is how I am using it

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

it works but when I use html in the content attribute like

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

they are handled like text, is there any way to pass HTML code to attribute and embed it in polymer-template

Upvotes: 0

Views: 271

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

I think what you actually want is to use the <content></content> insertion point within your <template>, rather than creating an attribute named content and using variable interpolation.

Here's an example:

<!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>

Upvotes: 1

Related Questions