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

时间：2017-01-19 10:01:08

标签： javascript html data-binding attributes polymer

我正在开展一个关于医生信息的项目，我正在用聚合物1.0做这件事。好吧，我有一些麻烦，甚至谷歌也无法帮助我。

我有3个组件：一个名为 doctor-grid 的vaadin-grid（基本上是医生列表），一个名为 doctor-dialog 的模态对话框和内容模态对话框（包含所选医生的信息）称为医生详细信息。我已将2个组件中的内容和模态对话框分开，因为我的老师告诉我。

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

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

How it should look

How it actually looks

对于医生详细信息，我创建了一个名为 doctordata 的属性。我不确定，但我认为选择的医生现在应该放在属性doctordata中，如 doctordata =＆＃34; selecteddoctor＆＃34; 。 但是我不知道如何让选定的医生从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>

我真的希望有人可以帮助我，因为它是一个非常重要的项目。 我感谢能得到的一切帮助。

1 个答案:

答案 0 :(得分：0)

（删除了之前的答案，因为它不再需要了）

更新＃2

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

您必须将基本HTML功能实现到Polymer insert功能。 您现在的完整代码如下所示：

ready

我还将双击侦听器移动到Polymer侦听器。只需用此代码替换您的<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> ，它就像一个魅力： - ）

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

相关问题
最新问题