聚合物模板使用HTML屬性

考慮這種聚合物元素聚合物模板使用HTML屬性

<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代碼傳遞給屬性並將其嵌入到聚合物模板中

來源

2014-10-02 lowcoupling

我想你實際上想要的是在你的<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>

來源

2014-10-02 16:41:51

聚合物模板使用HTML屬性

回答

相關問題