Question

我很难理解如何使用Polymer创建Web组件。我的目的只是在单击按钮时显示字符串，输入文本和按钮; String将使用输入文本的实际值进行更新。

这是我的第一次尝试：

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

这是structure of the project：

Answer 1

实际上，如果您喜欢使用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>

Answer 2

我没有权利/要点对以前的解决方案发表评论，但您可能只需确保将HakanC建议的聚合物组件安装在您应用的根目录中：

bower install --save PolymerElements/iron-input

聚合物简单元素

2 个答案: