代码之家 › 专栏 › 技术社区 › NeitoFR

聚合物单元素

polymer-1.0 polymer html javascript

NeitoFR · 技术社区 · 8 年前

我很难理解如何使用聚合物创建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>

我是接近结果了还是一切都错了?

哦,我忘了,这里是索引。调用我的组件的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 :

2 回复 | 直到 8 年前

Cappittall 8 年前

事实上,如果你喜欢用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>

Davie 8 年前

我无权对之前的解决方案发表评论,但您可能只需要确保您的应用程序根目录中安装了HakanC建议的聚合物组件:

bower install --save PolymerElements/iron-input

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前