2015-11-08 2 views
1

Я только начал работать над своим первым веб-приложением для полимеров, но я не могу понять, как создать простое приложение в полимере. Я установил полимер и web_компоненты. И сделал файл index.html с исходным кодом нижеНе знаю, почему Polymer не работает

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My First polymer web APP</title> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    </head> 
    <body> 
<polymer-element name="x-foo" noscript> 
<template> 
<h1>HELLO FROM x-foo</h1> 
</template> 
</polymer-element> 
<x-foo></x-foo> 
    </body> 
</html> 

Но он не работает. Я посмотрел в консоль, и это то, что я смотрю. Я думаю, что в этом нет никакой проблемы:

GET 
http://localhost:3000/ [HTTP/1.1 304 Not Modified 23ms] 
GET 
http://localhost:3000/bower_components/webcomponentsjs/webcomponents.min.js [HTTP/1.1 304 Not Modified 12ms] 
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer.html [HTTP/1.1 304 Not Modified 3ms] 
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer-mini.html [HTTP/1.1 304 Not Modified 36ms] 
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer-micro.html [HTTP/1.1 304 Not Modified 2ms] 
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create 

Помогите, поскольку я новичок в полимере. Заранее спасибо.

+0

на всякий случай, какой браузер вы используете? – vittore

+0

@vittore Firefox 41.0.2 – user3647254

+0

попытаться следовать кодекабам, опубликованным на полимерной вершине http://www.code-labs.io/codelabs/polymer-first-elements/index.html?index=..%2F..% 2Fpolymer-summit & viewga = UA-39334307-12 # 0 скажите мне, если он не работает для вас. – vittore

ответ

1

Похоже, вы используете синтаксис Polymer 0.5, но вы, вероятно, установили Polymer 1.0.

Попробуйте это:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My First polymer web APP</title> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    </head> 
    <body> 
<dom-module name="x-foo"> 
<template> 
<h1>HELLO FROM x-foo</h1> 
</template> 
<script> 
    window.addEventListener('WebComponentsReady', function() { 
    Polymer({is: 'x-foo'}); 
    }); 
</script> 
</dom-module> 
<x-foo></x-foo> 
    </body> 
</html> 

window.addEvetnListener часть необходимо только, если вы объявляете о элемент в основной HTML-файл вашего приложения, а не в HTML импорта.

+0

Я только что понял эту вещь. спасибо – user3647254

Смежные вопросы