javascript - polymer JS : How to use paper-input instead of input

Question

我正在重建 Polymer Todo MVC，现在我想用纸质元素交换所有普通元素。

这是接受和输入任务并将任务添加到数组的输入字段:

<header id="header">
    <input 
        autofocus
        is="td-input" 
        id="new-todo"
        placeholder="What needs to be done?" 
        on-td-input-commit="addTodoAction"
        on-td-input-cancel="cancelAddTodoAction">
</header>

工作正常。但现在我想改用paper-input，就像这样。

<header id="header">     
    <paper-input
        autofocus
        label="What needs to be done?" 
        is="td-input"
        id="new-todo"
        on-td-input-commit="addTodoAction"
        on-td-input-cancel="cancelAddTodoAction">
    </paper-input>
</header>

但是它不起作用。可能是因为我将之前的输入字段绑定(bind)到如下所示的 td-input 元素:

<script>
(function () {
    'use strict';

    var ENTER_KEY = 13;
    var ESC_KEY = 27;

    Polymer({
        is: 'td-input',

        extends: 'input',

        listeners: {
            'keyup': '_keyupAction',
            'keypress': '_keypressAction'
        },

        _keypressAction: function(e, detail, sender) {
            // Liten for enter on keypress but esc on keyup, because
            // IE doesn't fire keyup for enter.
            if (e.keyCode === ENTER_KEY) {
                this.fire('td-input-commit');
            }
        },

        _keyupAction: function(e, detail, sender) {
            if (e.keyCode === ESC_KEY) {
                this.fire('td-input-cancel');
            }
        }
    });
})();
</script>

显然 is="td-input 只是 extends: 'input' 当我希望它交换 paper-input 我得到:

Failed to execute 'registerElement' on 'Document': Registration failed for type 'td-input'. The tag name specified in 'extends' is a custom element name. Use inheritance instead.

如何使用纸张输入代替普通输入？

顺便说一句，是否有一个在线编辑器可以上传此网络应用程序以使代码可编辑？现在我尝试了 Plunker，但是带有纸质元素的普通待办事项应用程序所需的依赖项数量使 Plunker 成为一个糟糕的选择，因为它需要太多时间。

无论如何，这是我正在使用的代码:Polymer Todo App on TodoMVC.com

这是我想使用paper-input 代替的文件:

td-todos.html

Answer 1

您想要做的是让一个自定义元素(paper-input)扩展另一个自定义元素(td-input)，这将不起作用，因为目前您可以只扩展 Polymer 中的原生 HTML 元素。请参阅文档 here

您可以做的是将 on-keyuplistener 添加到 paper-input` 中，该监听器调用一个函数来检查按键是 Enter 还是 Escape，然后执行您想要的操作。

您的 HTML:

...
<paper-input
  autofocus
  label="What needs to be done?" 
  id="new-todo"
  on-keyup="_checkKeyPress"
</paper-input>
...

JS:

Polymer({
  is: "td-todos",
  _checkKeyPress: function (event) {
    if (event.keyCode === ENTER_KEY) {
      // add/save
    } else if (event.keyCode === ESC_KEY) {
      // cancel
    }
  }
  ...
});