私はイベントのリストを持っています。各イベントには名前があります。名前入力フィールドが空の場合は、それが表示されます。ユーザーが作業を終えたら、「Enter」を押すと、入力フィールドが非表示になり、スパンが表示されます。フィールドを再度編集する場合は、スパンをクリックして入力フィールドを表示します。ポリマーリストが更新されずにコンテンツが切り替わる
私はポリマー1.6を使用しています。ここで私が働いているコードです:
HTML
<template is="dom-repeat" items="{{referralEvents}}" index-as="index" id="referralEventsElement">
<span hidden$="{{!item.name.inputHidden}}" item-index="{{index}}" on-tap="showInput">{{item.name.value}}</span>
<input hidden$="{{item.name.inputHidden}}" placeholder="Name Session" value="{{item.name.value::input}}" on-keypress="checkForEnter" item-index="{{index}}>
</template>
JS
Polymer({
is: 'create-referral-event',
properties: {
referralEvents: {
type: Array,
value: [{
name: {
value: "Event 1",
inputHidden: true
},
{
name: {
value: "Event 2",
inputHidden: true
}
}]
}
},
checkForEnter: function(e){
if(e.keyCode == 13){
this.referralEvents[e.target.itemIndex].name.inputHidden = true;
}
},
showInput: function(e){
this.referralEvents[e.target.itemIndex].name.inputHidden = false;
});
うまく値の変更は、それが非表示にしたりするために、リストを更新しません要素を表示します。何か案は?
はい、どちらも機能します。私は個人的には配列のオーバーロードを好みます。文字列の連結はとても難しいです;) –