聚合物纸张输入更改不会在 Firefox 33.0.3 上触发答案

【问题标题】：Polymer paper-input on-change doesn't trigger on firefox 33.0.3聚合物纸张输入更改不会在 Firefox 33.0.3 上触发
【发布时间】：2014-11-19 23:03:41
【问题描述】：

我正在尝试运行http://itshackademic.com/static/codelabs/3-polymer-build-mobile/ 给出的教程示例。最终代码在 Chrome 上运行良好。但是，在 Firefox 33.0.3 上，<paper-input on-change="{{add}}"/> 不会调用相应的函数。代码如下，正如我提到的，在纸张输入时按“返回”不会触发该功能。我检查了几个类似的问题（this 和 this），但那里的解决方案并不真正适用。

代码在 Chrome 上运行良好。有什么建议吗？

index.html:

<!doctype html>

<html>
<head>
  <title>PolymerMobileCodelab</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="codelab-app.html">
</head>

<body unresolved>
  <codelab-app></codelab-app>
</body>
</html>

codelab-app.html：

<!-- New polymer element -->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">

<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">

<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">

<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">

<polymer-element name="codelab-app">
  <template>
    <link rel="stylesheet" href="styles.css">
    <core-drawer-panel id="drawerPanel" responsiveWidth="641px">

      <core-header-panel drawer>
      <core-toolbar>Menu</core-toolbar>
      </core-header-panel>

      <core-header-panel main>
        <core-toolbar>
          <paper-icon-button  icon="menu" core-drawer-toggle>

          </paper-icon-button>
          <span flex>My notes</span>
          <paper-icon-button icon="search"></paper-icon-button>
          <paper-icon-button icon="more-vert"></paper-icon-button>

          <paper-fab icon="icons:add" on-click="{{showNewNoteInput}}"></paper-fab>
        </core-toolbar>

        <div class="content">
          <paper-input  id="newNoteInput"
                        floatingLabel
                        on-change="{{add}}"
                        value="{{newNote}}"
                        label="Add a new note"></paper-input>
          <template repeat="{{data}}" >
            <div center horizontal layout class="item">
              <paper-checkbox checked="{{done}}" on-change="{{dataChanged}}"></paper-checkbox>
              <div flex class="card">
                <p>{{body}}</p>
              </div>
              <!-- paper-icon-button icon="clear" on-click="{{remove}}"></paper-icon-button -->
            </div>
          </template>
        </div>

      </core-header-panel>

    </core-drawer-panel>
    <core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
  </template>
  <script>
    Polymer({
      data: [],
      ready: function() {
        this.$.newNoteInput.style.display = 'none';
      },
      showNewNoteInput: function() {
        this.$.newNoteInput.style.display = 'block';
      },

      add: function() {
        if (this.newNote) {
          this.data.unshift({
            body: this.newNote,
            done: false
          });
          this.$.newNoteInput.style.display = 'none';
          this.$.newNoteInput.value = null;
        }
      },
      remove: function() {

      },
      dataChanged: function() {
        this.$.storage.save();
      }
    });
  </script>
</polymer-element>

【问题讨论】：

我在您的代码的 live demo 版本中看到了相同的行为。这可能与在 Polymer 0.5 发布时使用 <paper-input> 完成的一些重构有关。我在github.com/Polymer/paper-input/issues/111 上打开了一个错误，您可以关注它。
谢谢 - 我在那儿看到了你的开票。

标签： html firefox input onchange polymer

【解决方案1】：

这是 Polymer 方面的问题。从current version 开始解决。

change() 动作在 paper-input.html 中声明，并且有条件执行并阻止在旧浏览器上触发。

【讨论】：

【解决方案2】：

您始终可以扩展纸张输入并在其原型上使用 attributenameChanged 回调。如果需要，可以使用各种“应用程序全局”元素传递它。
但是是的，我想它不应该是这样的。

我将尝试复制/修复/破解它并返回。

【讨论】：