2016-09-27 3 views
3

私はイベントのリストを持っています。各イベントには名前があります。名前入力フィールドが空の場合は、それが表示されます。ユーザーが作業を終えたら、「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; 
    }); 

うまく値の変更は、それが非表示にしたりするために、リストを更新しません要素を表示します。何か案は?

答えて

1

私がなぜわからないんだけど、唯一this.set()方法は、私の仕事:インスピレーション、@のトマシュ・pluskiewiczため

showInput: function(e){ 
    this.set([ 
    'referralEvents', 
    e.target.itemIndex, 
    'name', 
    'inputHidden'], false); 
} 

https://www.polymer-project.org/1.0/docs/devguide/templates

1

感謝を。私はこれをテストし、配列の代わりにドット区切り文字列を使用して、オブジェクトにアクセスしてそれを変更することもできます。

showInput: function(e){ 
    this.set('referralEvents.' + e.target.itemIndex + '.name.inputHidden', false); 
} 
+1

はい、どちらも機能します。私は個人的には配列のオーバーロードを好みます。文字列の連結はとても難しいです;) –

関連する問題