2015-04-12 77 views
0

我尝试了聚合物的教程,这是工作在聚合物0.5.4罚款,而不是与聚合物0.8聚合物0.8抛出错误

的index.html

<!doctype html> 
<html> 
<head> 
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script> 
    <link rel="import" href="post-card.html"> 
    <style> 
    html,body { 
    height: 100%; 
    margin: 0; 
    background-color: #E5E5E5; 
    } 
    </style> 
</head> 
<body unresolved> 
     <post-card> 
     <img width="70" height="70" 
      src="../images/avatar-07.svg"> 
     <h2>Another Developer</h2> 
     <p>I'm composing with shadow DOM!</p> 
     </post-card> 
</body> 
</html> 

和后card.html

工作
<link rel="import" href="bower_components/polymer/polymer.html"> 
<polymer-element name="post-card"> 
    <template> 
    <style> 
    :host { 
     display: block; 
     position: relative; 
     background-color: white; 
     padding: 20px; 
     width: 100%; 
     font-size: 1.2rem; 
     font-weight: 300; 
    } 
    .card-header { 
     margin-bottom: 10px; 
    } 
    polyfill-next-selector { content: '.card-header h2'; } 
    .card-header ::content h2 { 
     margin: 0; 
     font-size: 1.8rem; 
     font-weight: 300; 
    } 
    polyfill-next-selector { content: '.card-header img'; } 
    .card-header ::content img { 
     width: 70px; 
     border-radius: 50%; 
     margin: 10px; 
    } 

    </style> 

    <!-- CARD CONTENTS GO HERE --> 
    <div class="card-header" layout horizontal center> 
     <content select="img"></content> 
     <content select="h2"></content> 
    </div> 
    <content></content> 
    </template> 
    <script> 
    Polymer({}); 
    </script> 
</polymer-element> 

in bower.json如果我从0.8.0改变到0.5.4它的工作原理。任何想法为什么这不起作用?

回答

1

很多东西都从聚合物0.5改变为聚合物0.8,并且几乎所有在0.5中出现的apis都不能用于0.8。

重写源会是这样,最好的办法:

index.html的需求没有变化

但是,card.html后需要返工:

<dom-module id="post-card"> 
    <style> 
    :host { 
     display: block; 
     position: relative; 
     background-color: white; 
     padding: 20px; 
     width: 100%; 
     font-size: 1.2rem; 
     font-weight: 300; 
    } 
    .card-header { 
     margin-bottom: 10px; 
    } 
    polyfill-next-selector { content: '.card-header h2'; } 
    .card-header ::content h2 { 
     margin: 0; 
     font-size: 1.8rem; 
     font-weight: 300; 
    } 
    polyfill-next-selector { content: '.card-header img'; } 
    .card-header ::content img { 
     width: 70px; 
     border-radius: 50%; 
     margin: 10px; 
    } 

    </style> 
    <template> 
    <div class="card-header" layout horizontal center> 
     <content select="img"></content> 
     <content select="h2"></content> 
    </div> 
    </template> 
</dom-module> 

<script> 
    Polymer({is: "post-card"}); 
</script> 

很多在这个alpha版本的聚合物中已经发生了变化:

提及Polymer 0.8中的所有变化是不可行的,因为它一直在变化。

请参阅由谷歌本文档获取更多信息高分子0.8:
https://www.polymer-project.org/0.8/docs/migration.html