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>

但它不起作用。可能是因为我将前一个输入字段绑定到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时，我得到：

无法执行＆＃39; registerElement＆＃39; on＆＃39; Document＆＃39;：类型＆t'td-input＆＃39;的注册失败。＆＃39;中指定的标记名称扩展了＆＃39;是自定义元素名称。改为使用继承。

如何使用纸张输入而不是正常输入？

在旁注中，是否有在线编辑器，我可以上传此webapp以使代码可编辑？现在我尝试了Plunker，但是普通的todo-app与纸质元素相关的依赖数量使得Plunker成为一个糟糕的选择，因为它需要太多的时间。

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

这是我想要使用paper-input的文件：

td-todos.html

Answer 1

您要做的是让自定义元素（paper-input）扩展另一个自定义元素（td-input），这将无效，因为目前您只能在Polymer中扩展本机HTML元素。请参阅文档here

你可以做的是添加一个on- keyup listener to the paper-input`，它调用一个函数来检查按键是否进入或退出然后执行你想要的动作。

您的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
    }
  }
  ...
});

PolymerJS：如何使用纸张输入而不是输入

1 个答案: