Question

我无法显示自定义元素。

这是项目结构：

structure of the project

这是我的元素index.html文件：

＆＃13;

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

＆＃13;

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

＆＃13;

要打开它，我用Firefox（file:///C:/...）打开了本地文件。我究竟做错了什么？

Answer 1

好的，其中一个答案是：您需要使用Web服务器来使用Polymer。您无法使用file：/// C：/ ...访问它，所以我设置了一个快速nodejs Express Server，仅用于开发元素，现在它运行良好。我是这样做的：

The project structure

使用我的聚合物自定义元素的index.html：

＆＃13;

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

＆＃13;

服务器app.js（非常简单）：

＆＃13;

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);
})

＆＃13;

组件定义：

＆＃13;

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

＆＃13;

现在updateSpan不起作用，但显示的元素是:)。所以这里我的自动回答，祝你有个美好的一天

如何显示聚合物元素？

1 个答案: