Question

考虑这种聚合物元素

<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代码传递给属性并将其嵌入到聚合物模板中

Answer 1

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

以下是一个例子：

＆＃13;

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

＆＃13;

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

1 个答案: