2015-04-12 75 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