Question

我正在尝试从JSON对象创建HTML模板并能够呈现元素，但事件不会添加到元素中，也不会显示在开发人员工具/ Shadow DOM中。

Codepen供参考 - https://codepen.io/nagasai/pen/bRjWbd

问题：事件 - onkeypress，onkeyup，onchange 未在输入和复选框元素上显示，也无法添加，但其他选项显示为名称，类型（再次类型仅显示复选框，但不显示文本框）

实际问题的屏幕截图

HTML：

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
  <x-foo attr='[{
               "type":"text",
               "title":"Textbox Name",
               "name":"temp",
               "requried":"requried",
               "onkeypress":"testKeyPress()",
               "onkeyup":"testKeyUp()",
               "onchange":""  
              },{
               "type":"checkbox",
               "title":"CheckBox Name",
               "name":"temp",
               "requried":"requried",
               "disabled":"disabled",
               "onkeypress":"",
               "onkeyup":"",
               "onchange":"testChange()" 
              }]'></x-foo>


  <dom-module id="x-foo">
    <template>
        <template is="dom-repeat" items="{{attr}}">
             <label>{{item.title}}</label>
             <input type="{{item.type}}"
                    required="{{item.required}}"
                    name="{{item.name}}"
                    onchange="{{item.onchange}}"
                    onkeypress="{{item.onkeypress}}"
                    onkeyup="{{item.onkeyup}}()"
                    >
         </template>
    </template>
  </dom-module>
</body>

JS：

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {
        attr:{
          type:Array
        }
      };

    }


  }
  customElements.define(XFoo.is, XFoo);

Answer 1

如果我错了，请纠正我，但应该是：

   on-change="{{item.onchange}}"
   on-keypress="{{item.onkeypress}}"
   on-keyup="{{item.onkeyup}}()"

参考：https://www.polymer-project.org/2.0/docs/devguide/gesture-events

Polymer 2.0 - 尝试使用事件从JSON创建HTML模板

1 个答案: