最小工作聚合物示例

我一直在嘗試使用聚合物在瀏覽器中簡單呈現一個極小的網頁 - 我在服務器端使用Node/ExpressJS/Jade安裝程序。我的代碼和Polymer文檔附帶的例子非常接近，我想我錯過了一些非常簡單的東西。我正在使用Chrome M35。最小工作聚合物示例

在服務器上，我已經安裝了所有使用涼亭聚合物材料（平臺，核心和紙張），我已經映射bower_components被/static

app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))

下靜態地提供我已驗證我的服務器可以正確提供資源，如http://localhost:3000/static/paper-button/paper-button.html - 這會返回所需文件的內容。

在網頁中投放的HTML是這樣：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="/static/platform/platform.js"></script> 
    <title>Authenticate</title> 
    <link rel="import" src="/static/paper-button/paper-button.html"> 
    <style> 
     body { 
     font-family: 'Helvetica Neue'; 
     margin: 0; 
     padding: 24px; 
     user-select: none; 
     transform: translateZ(0); 
     } 

     paper-button { 
     margin: 1em; 
     width: 10em; 
     } 

     paper-button.colored { 
     color: #4285f4; 
     fill: #4285f4; 
     } 

    </style> 
    </head> 
    <body> 
    <paper-button label="Authenticate" class="colored"></paper-button> 
    </body> 
</html>

這是接近，因爲它得到的例子爲同一部件上Polymer website作爲記錄。在我的情況下，沒有任何呈現。真正奇怪的是在檢查的網絡選項卡中顯示的內容：

Polymer Web Inspector

有一個Loader.js劇本，我相信得到由platform.js，它發送一個XHR根頁面本身安裝（在第三行）。在我看到的每個其他示例中，該加載腳本開始加載導入的Web組件。我只是無法弄清楚爲什麼它在做我的情況。另一個奇怪的是來自Parser.js的呼叫 - 請求的數據URL是data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK，這意味着：//# sourceURL=null/[1453].js - 再次，這不是一個很好的標誌。

我試圖在我的鏈接中使用相對的src s - 無濟於事。我基本上停留在一個很早的階段，真的很感激被指向正確的方向。

來源

2014-07-14 Julien Silland

這是不對的：

<link rel="import" src="/static/paper-button/paper-button.html">

它應該是：

<link rel="import" href="/static/paper-button/paper-button.html">

旁註：你可能也想使用圖標快遞中間件，以防止「可疑」 HTTP請求。（如果你的公共根目錄中沒有圖標，你會看到一個額外的http請求被快速處理，如果你的公共根目錄中沒有一個，中間件會提供特殊的圖標。）

來源

2014-07-14 08:18:04 badsyntax

Yeesh！那很簡單。謝謝。 –

最小工作聚合物示例

回答

相關問題