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

Question

我正在做一个关于医生信息的项目，我正在使用聚合物 1.0 来做这件事。好吧，我遇到了一些麻烦，甚至 Google 也帮不了我很多。

我有 3 个组件：一个名为 doctors-grid 的 vaadin-grid（基本上是医生列表）、一个名为 doctor-dialog 的模态对话框以及名为 doctor-details 的模态对话框（包含有关所选医生的信息）。我将内容和模态对话框分为 2 个组件，因为我的老师告诉我这样做。

在我的 vaadin-grid 中，我从 json 获取数据（顺便说一句，我正在这样做没有 iron-ajax）。在这个列表中，我可以通过双击选择一名医生，并在其中打开包含医生详细信息的模态对话框。我将选定的医生保存在一个名为“selecteddoctor”的变量中。

现在我的问题是：当模式对话框打开时，我希望所选医生的数据显示在内容中。例如在内容中应该显示类似这样的内容

How it should look

How it actually looks

对于医生详细信息，我创建了一个名为 doctordata 的属性。我不确定，但我认为现在应该将所选医生放入属性医生数据中，例如 doctordata = "selecteddoctor"。 但我不知道如何将所选医生从 vaadin 网格获取到我的医生详细信息组件以及如何将其定义到医生数据属性。

所以我的问题是：如何让选定的医生进入模态对话框并从那里获得医生详细信息，以在模态对话框中显示医生信息？

医生网格代码

<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

在我看到你的代码后，它可以工作了：

您必须为 Polymer ready 函数实现基本 HTML 函数。 您的完整代码现在如下所示：

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

我还将您的双击侦听器移至 Polymer 侦听器。只需用此代码替换您的aerzte-grid.html，它就像一个魅力:-)

请不要注释部分。它们很重要。