聚合物数据与Javascript和属性绑定

Question

I'm working on a project about doctors information and i'm doing this with polymer 1.0. Well, i have some trouble and even Google couldn't help me a lot.

I have 3 Components: a vaadin-grid (basically a list of the doctors) called doctors-grid , a modal dialog called doctor-dialog and the content of the modal dialog (which contains the information about the selected doctor) called doctor-details . I've separated the Content and the modal dialog in 2 components, because my teacher told me to.

In my vaadin-grid, i'm getting the data from a json (btw i'm doing this without iron-ajax). And in this list, i can select a doctor by double click and the modal dialog with the details of the doctor opens in it. I'm saving the selected doctor in an variable called "selecteddoctor".

Now to my problem: When the modal dialog opens, i want the data from the selected doctor to be shown in the content. For example in the content should be shown something like this

How it should look

How it actually looks

For doctor-details i created an attribute called doctordata . I'm not sure but i think that the selected doctor should now be put in the attribute doctordata like doctordata = "selecteddoctor" . But i don't know how to get the selected doctor from the vaadin grid to my doctor-details component and how to define it to the doctordata attribute.

So my question is: How can i get the selected doctor to the modal dialog and from there to the doctor details, to show the doctors information in the modal dialog?

doctors-grid code

<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>

doctor-dialog code

<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>

doctor-details code

<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>

I really hope someone can help me because it's a really important project. I'm thankful for every help I can get.

Answer 1

(removed earlier answer as it is not needed anymore)

Update #2

After I seen your code, it works:

You have to implement your Basic HTML functions to the Polymer ready function. Your complete code now looks like this:

<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>

I also moved your double-click-listener to a Polymer listener. Just replace your aerzte-grid.html with this code, and it works like a charm :-)

Please not the annotated sections. They are important.