Javascriptと属性を使用したポリマーデータバインド

Question

私は医師情報に関するプロジェクトに取り組んでいます。私はポリマー1.0でこれをやっています。まあ、私はいくつかの問題を抱えていて、Googleは私に多くの助けをすることはできませんでした

私は3つのコンポーネントがありますvaadinグリッド（医師の基本的リスト）医師グリッド、医師-ダイアログとの情報が含まれてモーダルダイアログ（の内容と呼ばれるモーダルダイアログと呼ばれます選択された医師）医師の詳細と呼ばれる。先生から教えてくれたので、コンテンツとモーダルダイアログを2つのコンポーネントで分けました。

私のvaadinグリッドでは、私はjsonからデータを取得しています（私は iron-ajaxなしでこれをやっています）。そしてこのリストでは、私はダブルクリックで医者を選択することができ、医者の詳細を含むモーダルダイアログがそこに開きます。私は選択した医者を "selecteddoctor"という変数に保存しています。

私の問題です：モーダルダイアログボックスが開いたら、選択した医者のデータをコンテンツに表示します。例えば、コンテンツに私はdoctordataと呼ばれる属性を作成した医師-詳細については、この

How it should look

How it actually looks

のようなものを示すべきです。私は確信していませんが、私は選択された医師がのdoctordata = "selecteddoctor"のように属性doctordataに入れられるべきだと思います。 しかし、選択した医者をvaadinグリッドから医者の詳細コンポーネントに取得する方法と、それをdoctordata属性に定義する方法はわかりません。

私の質問は次のとおりです。モーダルダイアログに医師の情報を表示するには、選択した医師をモーダルダイアログに、医師の詳細にどのようにして取得できますか？

医師グリッドコード

<link rel="import" href="../../bower_components/polymer/polymer.html"/> 
<link rel="import" href="../../bower_components/vaadin-grid/vaadin-grid.html"/> 

<dom-module id="doctors-grid"> 
    <template> 
     <vaadin-grid id="doctors-grid"> 
      <table> 
       <colgroup> 
       ....... 
       </colgroup> 
      </table> 
     </vaadin-grid> 
    </template> 

<script> 
    Polymer({ 
     is: 'doctors-grid' 
    }); 
    (function() { 
     HTMLImports.whenReady(function() { 
      var grid = document.getElementById('doctors-grid'); 
      var doctors = []; 
      var selecteddoctor = null; 

      getJSON('/json/doctors.json', function(json) { 
       doctors = json; 
       grid.items = doctors; 
       grid.refreshItems(); 
      }); 


      grid.addEventListener('selected-items-changed', function() { 
       var selectedindex = grid.selection.selected(); 

       if(selectedindex.length > 0){ 
        selecteddoctor = doctors[selectedindex[0]]; 
        console.log('Selected: ' + grid.selection.selected()); 
       } 
       }); 

       grid.addEventListener('dblclick', function() { 
        modaldoctordialog.open(); -->This is the modal dialog 
        console.log('Doubleclick: ' + selectedarzt.name); -->this works 
       }); 
     }); 

     function getJSON(url, callback) { 
      var xhr = new XMLHttpRequest(); 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
        callback(JSON.parse(xhr.responseText)); 
       } 
      }; 
      xhr.open('GET', url, true); 
      xhr.send(); 
     } 
    })(); 
</script> 

医師・ダイアログコード

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/> 
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"/> 
<link rel="import" href="../doctor-details/doctor-details.html"/> 

<dom-module id="doctor-dialog"> 
    <template> 
    <paper-dialog id="modaldoctordialog" modal> 
     <paper-dialog-scrollable> 
     <div class="content"> 
      <doctor-details doctordata="WHAT COMES IN HERE?"></doctor-details> 
     </div> 
     </paper-dialog-scrollable> 
     <paper-button dialog-dismiss>Cancel</paper-button> 
     <paper-button>Modify</paper-button> 
    </paper-dialog> 
    </template> 

    <script> 
    Polymer({ 
    is: 'doctor-dialog', 
    }); 
    </script> 
</dom-module> 

医師-詳細コード

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

<dom-module id="doctor-details"> 
    <template> 
    <style> 
     ....... 
    </style> 


    <div class="block"> 
     <paper-material elevation="1">Doctor</paper-material> 
     <table> 
     <tr> 
      <td>Name</td> 
      <td><paper-input label = "{{doctordata.name}}" disabled></paper-input></td> --> the label should be correct but when I open the dialog the input field is empty 
     </tr> 
     <tr> 
      <td>Forename</td> 
      <td><paper-input label = "{{doctordata.forename}}></paper-input></td> 
     </tr> 
     </table> 
    </div> 

    ..... 
    ..... 

    </template> 
    <script> 
    Polymer({ 
    is: 'doctor-details', 
    properties: { 
       doctordata: { 
        type: Object, 
        value: null 
       } 
      } 
    }); --> here i created the attribute doctordata 
    </script> 
</dom-module> 

本当に重要なプロジェクトなので、誰かが私を助けてくれることを願っています。 私が得るすべての助けに感謝しています。

Answer 1

（それはもはや必要ないように除去以前の回答）

更新＃私はあなたのコードを見た後に2

、それが動作します：

あなたは、あなたの基本的なHTMLの機能を実装する必要がありますポリマーreadyの機能。 あなたの完全なコードは次のようになります。

<link rel="import" href="../../bower_components/polymer/polymer.html"/> 
<link rel="import" href="../../bower_components/vaadin-grid/vaadin-grid.html"/> 
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/> 
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"/> 
<link rel="import" href="../arzt-details/arzt-details.html"/> 

<dom-module id="aerzte-grid"> 
    <link rel="import" type="css" href="../../css/paper-buttons-style.css"> 
    <template> 
     <style> 
      #sort { 
       height: 300px; 
      } 

     </style> 

     <vaadin-grid id="aerzte-grid"> 
      <table> 
       <colgroup> 
        <col name="vorname" sortable/> 
        <col name="name" sortable/> 
        <col name="adresseNr" sortable/> 
        <col name="plz" sortable/> 
        <col name="ort" sortable/> 
        <col name="telefon"/> 
       </colgroup> 
      </table> 
     </vaadin-grid> 

     <!--Modales Fenster--> 
     <paper-dialog id="arztdialog" modal> 
      <paper-dialog-scrollable> 
      <div class="content"> 
       <!-- Change arztdata to arztdetaildata, we won't use the whole object --> 
       <arzt-details arztdata="{{arztdetaildata}}"></arzt-details> 
      </div> 
      </paper-dialog-scrollable> 
      <paper-button dialog-dismiss>Abbrechen</paper-button> 
      <paper-button>Bearbeiten</paper-button> <!--Falls auf Bearbeiten geklickt wird, soll sich dieser Button zu "Speichern" ändern und die paper-inputs auf enabled setzen--> 
     </paper-dialog> 

    </template> 

    <script> 
     Polymer({ 
      is: 'aerzte-grid', 
       properties: { 
       // We have one global object with all data 
       arztdata: { 
        type: Object, 
        notify: true 
       }, 
       // we have a detail object that holds just the data for the current doctor 
       arztdetaildata: { 
        type: Object, 
        notify: true 
       } 
      }, 
      // register the double-click-event listener 
      listeners: { 
       'dblclick': 'onDblClick' 
      }, 
      ready: function() { 
       // this is important, because 'this' is not applicable inside of whenReady() 
       var that = this; 
       HTMLImports.whenReady(function() { 
        var grid = document.getElementById('aerzte-grid'); 
        var aerzte = []; 
        var selectedarzt = null; 

        that.getJSON('/json/aerzte.json', function(json) { 
         aerzte = json; 
         grid.items = aerzte; 
         grid.refreshItems(); 
        }); 

        grid.addEventListener('sort-order-changed', function() { 
         var sortOrder = grid.sortOrder[0]; 
         var sortProperty = grid.columns[sortOrder.column].name; 
         var sortDirection = sortOrder.direction; 
         grid.items.sort(function(a, b) { 
          var res; 
          var path = sortProperty.split('.'); 
          for (var i = 0; i < path.length; i++) { 
           a = a[path[i]]; 
           b = b[path[i]]; 
          } 
          if (!isNaN(a)) { 
           res = parseInt(a, 10) - parseInt(b, 10); 
          } else { 
           res = a.localeCompare(b); 
          } 

          if ('desc' === sortDirection) { 
           res *= -1; 
          } 
          return res; 
         }); 
        }); 
        grid.addEventListener('selected-items-changed', function() { 
         var selectedindex = grid.selection.selected(); 

         if(selectedindex.length > 0){ 
         selectedarzt = aerzte[selectedindex[0]]; 
         // i replaced arztdata with that.arztdetaildata, so it is in polymers scope and can be bound to elements 
         that.arztdetaildata = selectedarzt; 
         console.log('Selected: ' + grid.selection.selected()); 
         } 
        }); 

       }); 
      }, 
      getJSON: function(url, callback) { 
        var xhr = new XMLHttpRequest(); 
        xhr.onreadystatechange = function() { 
         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
          callback(JSON.parse(xhr.responseText)); 
         } 
        }; 
        xhr.open('GET', url, true); 
        xhr.send(); 
      }, 
      // double-click-handler, logs the detail json object 
      onDblClick: function() { 
       arztdialog.open(); 
       console.log('arzt-detail-data', this.arztdetaildata); 
      }, 
     }); 
    </script> 
</dom-module> 

私はまた、ポリマーのリスナーにあなたダブルクリックリスナーを動かします。 aerzte-grid.htmlをこのコードに置き換えれば、魅力的なように動作します:-)

注釈のついたセクションは使用しないでください。彼らは重要です。