ボタンをクリックしたときに紙の入力を有効にする（ポリマー1.0）

Question

私は医師のリストについてのプロジェクトに取り組んでおり、ポリマー1.0を使用しています。

ドクターリストの場合、私はという医者のグリッドを使用しています。これはdoctors-grid.htmlです。ここで私はJSONからデータを取得しています。医師がダブルクリックされると、選択された医師に関する情報が表示されたモーダルダイアログが開きます。 ダイアログの内容は、doctor-details.htmlと呼ばれる別のコンポーネントです。

医者に関する情報は、無効な入力欄に記載されています。

私はこのダイアログに変更ボタンを持っています。このボタンをクリックすると、ボタンのテキストが「保存」に変わります。私の問題への今

：今、私はまた、私は修正ボタンをクリックしたときにこれらの無効紙の入力フィールドを有効にするので、私は医者についての情報を変更することができにしたいです。変更した後、変更したデータをJSONに保存して、ボタンを再度「変更」に変更して、すべての入力フィールドを再度無効にします。

これは、これは私が医者からボタンと紙の入力をクリックし医師-grid.html、からである私の医師-details.html

<link rel="import" href="../../bower_components/paper-input/paper-input.html"/> 
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/> 

<dom-module id="doctor-details"> 
    <template> 
     <table> 
     <tr> 
      <td>Name</td> 
      <td><paper-input label="{{doctordata.name}}" disabled></paper-input></td> 
     </tr> 
     <tr> 
      <td>Forename</td> 
      <td><paper-input label="{{doctordata.forename}}" disabled></paper-input></td> 
     </tr> 
     </table> 
    </template> 

    <script> 
    Polymer({ 
     is: 'doctor-details', 
     properties: { 
     doctordata: { 
      type: Object, 
      value: null 
     } 
    </script> 
</dom-module> 

の一部です。 -details.htmlを有効にする必要があります。そして、この機能で私はこれらの入力フィールドを有効にする必要があります。

  onClick: function() { 
      var button = this.$.msbutton; 
      button.textContent = 'Save'; 

      var inputfields = []; 
     //How can I save all paper-inputs in this array? 
     //How can I enable all paper-inputs? 
     } 

私はあなたがプロジェクト全体（と、それはあまりにも多くのコードになります）を見たとき、それは簡単だと思うので、私は、ここで直接全体のコードを投稿しないでください。 私は自分のDropboxへのリンクを持っています：https://www.dropbox.com/s/crsrixs0nw6tvyy/WebContentEN.zip?dl=0

私はグーグルで試してみましたが、私はいつも失敗しました。私はポリマーの初心者なので、どうすればいいかわからないので、誰かが私を助けることができれば本当に感謝しています。ありがとう！

Answer 1

このアレイにすべての紙入力を保存するにはどうすればよいですか？

グリッド要素から入力フィールドを直接取得することは好ましくありません。バインディングを使用してdisabledプロパティを制御できます。内部ではdoctor-detailsにプロパティを作成し、それを入力にバインドします。

<paper-input label="{{doctordata.name}}" 
      disabled="{{disabled}}></paper-input> 

<script> 
Polymer({ 
    is: 'doctor-details', 
    properties: { disabled: Boolean } 
}); 
</script> 

外部では、同じプロパティを追加し、それぞれdoctor-detailsでバインドします。私はすべての紙の入力を有効にするにはどうすればよい

<doctor-details disabled="{{editDisabled}}></doctor-details> 

<script> 
Polymer({ 
    is: 'doctor-grid', 
    properties: { 
     editDisabled: { 
     value: true 
     } 
    }, 

    onClick: function() { 
     this.editDisabled = !this.editDisabled; 
    } 
}); 
</script> 

？

要約すると、要素にバインドされた1つのブール値プロパティですべての入力を制御します。

また、1つのボタンのタイトルを変更するのではなく、editDisabledに応じて表示/非表示にする2つのボタンがあります。