2014-10-02 6 views
0

이 내가 그것을 작동사용하여 HTML은

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

를 사용하고 어떻게하지만 내용에 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 <p>with paragraphs</p>" title="Here is a nice Title"></my-card> 

그들은 텍스트처럼 처리됩니다. HTML 코드를 속성에 전달하고 폴리머 템플릿에 포함시키는 방법이 있습니까?

답변

1

content이라는 속성을 만들고 변수 보간법을 사용하는 것보다는 실제로 <content></content> insertion point<template> 안에 사용하는 것이 좋습니다.

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

: 여기

은 예입니다