高分子单质

Question

我很难理解如何使用 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>

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

我没有 rights/points 对之前的解决方案发表评论，但您可能只需要确保在应用程序的根目录中安装了 HakanC 建议的聚合物组件：

bower install --save PolymerElements/iron-input

高分子单质

Polymer simple element

javascript

html

polymer

polymer-1.0