我正在开展一个关于医生信息的项目，我正在用聚合物1.0做这件事。好吧，我有一些麻烦，甚至谷歌也无法帮助我。
我有3个组件：一个名为 doctor-grid 的vaadin-grid（基本上是医生列表），一个名为 doctor-dialog 的模态对话框和内容模态对话框（包含所选医生的信息）称为医生详细信息。我已将2个组件中的内容和模态对话框分开，因为我的老师告诉我。
在我的vaadin-grid中，我从json获取数据（顺便说一下，我这样做没有 iron-ajax）。在此列表中，我可以通过双击选择医生，并在其中打开带有医生详细信息的模态对话框。我将选定的医生保存在名为＆＃34; selecteddoctor＆＃34;的变量中。
现在我的问题：当模态对话框打开时，我希望所选医生的数据显示在内容中。例如，内容应该显示类似这样的内容
对于医生详细信息，我创建了一个名为 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>
我真的希望有人可以帮助我，因为它是一个非常重要的项目。 我感谢能得到的一切帮助。
答案 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>
，它就像一个魅力： - ）
请注明注释部分。它们很重要。