Pertanyaan Contoh Polimer kerja minimal


Saya sudah mencoba untuk mendapatkan halaman web yang sangat minim menggunakan Polymer untuk dirender di browser - Saya menggunakan setup Node / ExpressJS / Jade di sisi server. Kode saya sedekat mungkin dengan contoh yang dikirimkan dengan dokumentasi Polymer, saya pikir saya kehilangan sesuatu yang sangat sederhana. Saya menggunakan Chrome M35.

Di server, saya telah menginstal semua barang Polymer (platform, inti dan kertas) menggunakan bower dan saya telah memetakannya bower_components untuk dilayani secara statis di bawah /static

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

Saya telah memverifikasi bahwa server saya dapat melayani sumber daya seperti http://localhost:3000/static/paper-button/paper-button.html - Ini mengembalikan isi file yang diinginkan.

HTML yang disajikan oleh halaman adalah seperti itu:

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

Ini sedekat sampai ke contoh untuk widget yang sama seperti yang didokumentasikan pada Situs web polimer. Dalam kasus saya, tidak ada yang merender. Yang benar-benar aneh adalah apa yang ditampilkan di tab Jaringan inspektur:

Polymer Web Inspector

Ada sebuah Loader.js skrip, yang saya yakini terinstal oleh platform.js, yang mengirim XHR untuk halaman root itu sendiri (baris ke-3). Di setiap contoh lain yang saya lihat, bahwa pemuatan skrip mulai memuat komponen web yang diimpor. Saya tidak tahu mengapa melakukan ini dalam kasus saya. Hal aneh lainnya adalah panggilan yang berasal dari Parser.js - URL data yang diminta data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK, yang diterjemahkan menjadi: //# sourceURL=null/[1453].js - lagi, bukan pertanda yang sangat bagus.

Saya sudah mencoba menggunakan relatif srcdi tautan saya - tidak berhasil. Saya pada dasarnya terjebak pada tahap yang sangat awal dan akan sangat menghargai untuk menunjuk ke arah yang benar.


5
2017-07-14 01:31


asal


Jawaban:


Ini tidak benar:

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

Harus:

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

Catatan sampingan: Anda mungkin juga ingin menggunakan middleware favicon express untuk mencegah permintaan http yang "mencurigakan". (Jika Anda tidak memiliki favicon di root publik Anda, Anda akan melihat permintaan http ekstra yang ditangani oleh express, middleware akan melayani favicon ekspres jika Anda tidak memilikinya di root publik Anda.)


6
2017-07-14 08:18