Question

我在做这个Polymer CodeLab：

http://itshackademic.com/static/codelabs/3-polymer-build-mobile/#5

问题是，我不通过数据绑定显示我所说的笔记。我还从GitHub下载了这个例子，这个也不行。

https://github.com/googlesamples/io2014-codelabs/tree/master/polymer-build-mobile/step5

所以我完全康复了。这是我的代码，它完全相同：

<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/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">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">

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

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

    <core-header-panel main>
      <core-toolbar>
        <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></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 label="Add a new note" on-change="{{add}}" value="{{newNote}}"></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>
            </div>
          </template>
        </div>
    </core-header-panel>
  </core-drawer-panel>
  <core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>
<script>
  Polymer('codelab-app', {
    data: [],
    toggleDrawer: function() {
      this.$.drawerPanel.togglePanel();
    },
    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;
      }
    },
    dataChanged: function(){
      this.$.storage.save();
    }
  });
</script>
</polymer-element>

Answer 1

纸张输入变化事件未被触发。这就是数组仍为空的原因。如果您更改常规输入的纸张输入 - 请参见下文 - 功能正常，则会更新阵列。但它看起来像是一个常规输入。我不是百分之百确定它是否在我们这方面的无知或者在纸张输入回购下报告的错误。

<input is="paper-input" id="newNoteInput"
           floatingLabel
           label="Add a new note"
           on-change="{{addNew}}"
           value="{{newNote}}">

我在回购邮件中创建了一个问题：https://github.com/Polymer/paper-input/issues/84

问题已解决。运行bower更新，一切都应该再次运行。如果要查看代码更改。审核此提交

https://github.com/Polymer/paper-input/commit/4c46adf20e0d7332ca08005fa5df3c8d0e401346

为什么Polymer中的CodeLab示例不起作用？

1 个答案: