Polymer 为什么聚合物中的CodeLab示例不起作用?
我正在做这个聚合物代码实验室: 问题是,我无法通过数据绑定显示我输入的注释。我还从GitHub下载了这个示例,但这个示例也不起作用 所以我很狡猾。这是我的代码,完全相同: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
<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,一切都会再次正常工作。如果您想查看代码更改。查看此提交