Polymer 为什么聚合物中的CodeLab示例不起作用?

Polymer 为什么聚合物中的CodeLab示例不起作用?,polymer,Polymer,我正在做这个聚合物代码实验室: 问题是,我无法通过数据绑定显示我输入的注释。我还从GitHub下载了这个示例,但这个示例也不起作用 所以我很狡猾。这是我的代码,完全相同: <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/font-roboto/roboto.html"> <link rel="imp

我正在做这个聚合物代码实验室:

问题是,我无法通过数据绑定显示我输入的注释。我还从GitHub下载了这个示例,但这个示例也不起作用

所以我很狡猾。这是我的代码,完全相同:

<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>

菜单
我的笔记
{{body}}

聚合物(‘codelab-app’{ 数据:[], toggleDrawer:function(){ 这是$.DroperPanel.togglePanel(); }, 就绪:函数(){ 此.$.newNoteInput.style.display='none'; }, showNewNoteInput:函数(){ 此.$.newNoteInput.style.display='block'; }, 添加:函数(){ 如果(本新注释){ 此为.data.unshift({ 正文:这个,新注, 完成:错误 }); 此.$.newNoteInput.style.display='none'; 此.$.newNoteInput.value=null; } }, dataChanged:函数(){ 这是$.storage.save(); } });
未触发更改时的纸张输入事件。这就是数组仍然为空的原因。如果将纸张输入更改为常规输入-请参见下文-此功能正常工作,阵列将更新。但它看起来像一个常规输入。我不能100%确定这是我们的无知还是纸质输入回购协议下报告的错误

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

我已在回购协议中创建了一个问题:

问题解决了。运行bower update,一切都会再次正常工作。如果您想查看代码更改。查看此提交