我很难理解如何使用 Polymer 创建 Web 组件。我的目的只是在单击按钮时显示一个字符串、一个输入文本和一个按钮；字符串将更新为输入文本的实际值。
这是我的第一次尝试:
<link rel="import" href="./../bower_components/polymer/polymer.html">
<dom-module id="neito-sidebar">
<template>
<style>
</style>
<label for="test">Name : </label>
<input type="text" name="test" id="test">
<button on-tap="_updateSpan">Valider</button>
<span>[[mot]]</span>
</template>
<script>
Polymer({
is: 'neito-sidebar',
properties: {
mot: String,
notify: true
},
_updateSpan: function()
{
this.mot = $('#test').val();
}
});
</script>
</dom-module>
我已经接近结果了还是我的一切都错了？
哦我忘了，这里是调用我的组件的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="./components/neito-sidebar.html">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/jquery/dist/jquery.js">
<title>Polymer Element</title>
</head>
<body>
<neito-sidebar></neito-sidebar>
</body>
</html>
最佳答案
事实上，如果你喜欢用 Polymer 的方式来做，那就很简单了，甚至你不需要任何 js 代码或任何按钮。您输入的内容将出现在跨度中。
<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>
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-input/iron-input.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
display: block;
height: 100%;
}
span {
color:red;
}
</style>
<iron-input bind-value="{{mot}}">
<label for="test">Name : </label>
<input id="test" type="text" value="{{mot::input}}">
</iron-input>
<br/>
<span>[[mot]]</span>
</template>
<script>
HTMLImports.whenReady(function() {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() { return {
}};
static get observers() { return []}
}
customElements.define(XFoo.is, XFoo);
});
</script>
</dom-module>
</body>
</html>关于javascript - 高分子简单元件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48359651/