2
http://itshackademic.com/static/codelabs/3-polymer-build-mobile/에 제공된 자습서 예제를 실행하려고합니다. 최종 코드는 Chrome에서 정상적으로 작동합니다. 그러나 firefox 33.0.3에서는 <paper-input on-change="{{add}}"/>이 적절한 함수를 호출하지 않습니다. 코드는 아래에 있으며, 언급 한 바와 같이 종이 입력 중에 "Return"키를 누르면 기능이 실행되지 않습니다. 몇 가지 비슷한 질문 (this 및 this)을 확인했지만 그곳의 솔루션은 실제로 적용되지 않습니다.폴리머 용지 입력이 firefox에서 트리거되지 않습니다. 33.0.3
코드는 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>
코드 랩 - 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>
[라이브 데모] (http://jsbin.com/diwapu/4/edit) 버전의 코드에서 동일한 동작이 나타납니다. 이것은 Polymer 0.5 릴리스 전후에 ''으로 수행 된 리팩토링과 관련이있을 가능성이 큽니다. 내가 따라갈 수있는 버그를 https://github.com/Polymer/paper-input/issues/111에서 열었습니다. –
감사합니다 - 거기 열린 티켓을 봤습니다. – RafazZ