如何显示聚合物元素？
[英]How to display a polymer element?
问题描述
我无法显示自定义元素。
这是项目结构：
。
这是带有我的元素的index.html文件：
<link rel="import" href="./../bower_components/polymer/polymer.html"> <link rel="import" href="./../bower_components/iron-input/iron-input.html"> <dom-module id="neito-sidebar"> <template> <style></style> <iron-input bind-value="{{mot}}"> <label for="test">Name : </label> <input id="test" type="text" value="{{mot::input}}"> </iron-input> <span>[[mot]]</span> </template> <script> Polymer({is: 'neito-sidebar' }); </script> </dom-module>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="import" href="./bower_components/polymer/polymer.html"> <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="./components/neito-sidebar.html"> <title>Polymer Element</title> </head> <body> <neito-sidebar></neito-sidebar> </body> </html>
要打开它，我用Firefox打开了本地文件（ file:///C:/... ）。 我究竟做错了什么？
1 个解决方案
解决方案1
0 2018-01-21 16:43:35
好的，答案之一是：您需要使用Web服务器才能使用Polymer。 您不能使用file：/// C：/ ...来访问它，所以我为该元素的开发设置了一个快速的nodejs Express Server，它现在运行良好。 这是我的方法：
使用我的聚合物自定义元素的index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js"> <link rel="import" href="./elements/neito-sidebar.html"> <title>Polymer Element</title> </head> <body> <neito-sidebar></neito-sidebar> </body> </html>
服务器app.js（非常简单）：
var express = require('express'), path = require('path'); const _port = 3000; var app = express(); app.use(express.static(path.join(__dirname, '/..', 'public'))) app.get('/', function (req, res){ res.sendFile('../public/index.html', {root: __dirname}); }) .listen(_port, function (){ console.log('Server listening on : '+_port); })
以及组件定义：
<!DOCTYPE html> <link rel="import" href="./../bower_components/polymer/polymer.html"> <dom-module id="neito-sidebar"> <template> <style> span { padding: 5px; border: 1px solid black; } </style> <label for="test">Name : </label> <input type="text" name="test" id="test"> <button onclick="_updateSpan">Valider</button> <span>{{mot}}</span> </template> <script> Polymer({ is: 'neito-sidebar', properties: { mot: { type: String, notify: true } }, _updateSpan: function() { this.mot = $('#test').val(); } }); </script> </dom-module>
目前，updateSpan不起作用，但该元素显示为:)。 所以在这里我的自动应答，祝你有美好的一天
如何在Polymer Element（Polymer 2.0）中实现此代码
[英]How can implement this code in a Polymer Element (Polymer 2.0)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.