在聚合物2.0中成功响应后，将显示纸-datatable-api绑定到阵列
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在聚合物2.0中成功响应后，将显示纸-datatable-api绑定到阵列相关的知识，希望对你有一定的参考价值。
我正在尝试使用paper-datatable-api，https://github.com/RoXuS/paper-datatable-api显示数据表。这个数据来自服务器的一些json响应，类似这样：
[{"diklat":"Test 5","penyelenggara":"BPSDMD Provinsi Jateng","peserta":2,"year":"2018"},
{"diklat":"Test 4","penyelenggara":"BPSDMD Provinsi Jateng","peserta":1,"year":"2018"},
{"diklat":"Test 3","penyelenggara":"BKD Provinsi Jateng","peserta":2,"year":"2018"},
{"diklat":"Test 1","penyelenggara":"BPSDMD Provinsi Jateng","peserta":2,"year":"2018"}]
并在纸对话框中输入一些输入表格以输入一些数据。
数据在paper-datatable-api表中正确显示，输入也有效。我试图掌握的问题是，在成功提交后，我如何能够自动绑定到表格中的显示数据...？因此，表格会自动显示并添加新数据。
现在，我应该在提交表单后硬刷新（F5）以显示新的表数据列表。
这里使用的聚合物定制组件：
使用paper-datatable-api显示和输入数据的组件
<link rel="import" href="add-form.html">
<dom-module id="train-list">
<template>
<style include="iron-flex iron-flex-alignment"></style>
<style include="shared-styles">
:host {
display: block;
padding: 5px;
}
</style>
<iron-ajax
id="reqTr"
auto
url="http://127.0.0.1:5000/rekap"
handle-as="json"
on-response="handleResponse"
>
</iron-ajax>
<paper-dialog id="addTrainDialog">
<paper-dialog-scrollable>
<div class="card">
<h1>Add diklat</h1>
<add-form></add-form>
</div>
</paper-dialog-scrollable>
</paper-dialog>
<!-- Create a floating action button -->
<paper-fab
icon='add'
style='position:absolute; bottom: 30px; right:24px'
on-click='showAddTrainDialog'>
</paper-fab>
<paper-datatable-api paginate data="{{trainings}}">
<paper-datatable-api-column header="Diklat" draggable-column property="diklat">
<template>
<span>{{value}}</span>
</template>
</paper-datatable-api-column>
<paper-datatable-api-column header="Penyelenggara" property="penyelenggara">
<template>
<span>{{value}}</span>
</template>
</paper-datatable-api-column>
<paper-datatable-api-column header="Peserta" property="peserta">
<template>
<span>{{value}}</span>
</template>
</paper-datatable-api-column>
<paper-datatable-api-column header="Tahun" property="year">
<template>
<span>{{value}}</span>
</template>
</paper-datatable-api-column>
</paper-datatable-api>
</template>
<script>
class TrainList extends Polymer.Element {
static get is() { return 'train-list'; }
static get properties() {
return {
trainings: {
type: Array,
notify: true
}
}
}
handleResponse(data) {
this.trainings = data.detail.response;
}
showAddTrainDialog() {
this.$.addTrainDialog.open();
}
}
window.customElements.define(TrainList.is, TrainList);
</script>
</dom-module>
在这里，add-form的自定义组件：
<dom-module id="add-form">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 5px;
}
</style>
<iron-ajax
id="addTrainAjax"
method="post"
content-type="application/json"
handle-as="text"
on-response="handleResponse"
on-error="handleError">
</iron-ajax>
<iron-form id="addTrainForm">
<form>
<template is="dom-if" if="[[error]]">
<p class="alert-error"><strong>Error:</strong> [[error]]</p>
</template>
<paper-input name="name" type="text" value="{{formData.name}}" placeholder="Nama Diklat" auto-validate required error-message="Input title diklat!!"></paper-input>
<paper-input name="description" type="text" value="{{formData.description}}" placeholder="Deskripsi" auto-validate required error-message="Input deskripsi diklat!!"></paper-input>
<paper-dropdown-menu label="Kategory" selected-item="{{selectedItem}}" selected-item-label="{{selected}}" auto-validate required error-message="Pilih satu!!">
<paper-listbox class="dropdown-content" slot="dropdown-content" attr-for-selected="value" selected="{{formData.category}}">
<template is="dom-repeat" items="[[categories]]">
<paper-item value="[[item.id]]">[[item.id]] - [[item.category_name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<input is="iron-input" name="category" type="hidden" value$="[[formData.category]]">
<paper-input name="begin" type="date" value="{{formData.begin}}" placeholder="Mulai" auto-validate required error-message="Input mulai diklat!!"></paper-input>
<paper-input name="end" type="date" value="{{formData.end}}" placeholder="Kelar" auto-validate required error-message="Input selesai diklat!!"></paper-input>
<paper-dropdown-menu label="Penyelenggara" selected-item="{{selectedItem}}" selected-item-label="{{selected}}" required auto-validate error-message="Pilih satu!!">
<paper-listbox class="dropdown-content" slot="dropdown-content" attr-for-selected="value" selected="{{formData.penyelenggara}}">
<template is="dom-repeat" items="[[penyelenggara]]">
<paper-item value="[[item.id]]">[[item.id]] - [[item.short_name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<input is="iron-input" name="penyelenggara" type="hidden" value$="[[formData.penyelenggara]]">
<paper-input name="location" type="text" value="{{formData.location}}" placeholder="Location" auto-validate required error-message="Input selesai diklat!!"></paper-input>
<paper-input name="address" type="text" value="{{formData.address}}" placeholder="Address" auto-validate required error-message="Input alamat diklat!!"></paper-input>
<paper-input name="city" type="text" value="{{formData.city}}" placeholder="City" auto-validate required error-message="Input city diklat!!"></paper-input>
<paper-input name="jp" type="number" value="{{formData.jp}}" placeholder="JP" auto-validate required error-message="Input jampel diklat!!"></paper-input>
<div class="wrapper-btns">
<paper-button id="send" raised class="primary" on-tap="postProcessing">Send to server ..</paper-button>
</div>
</form>
</iron-form>
</template>
<script>
class AddForm extends Polymer.Element {
static get is () {
return 'add-form';
}
constructor() {
super();
this._submitted = false;
this._presubmitted = false;
}
ready() {
super.ready();
this.$.addTrainForm.addEventListener('iron-form-submit', function() {
this._submitted = true;
}.bind(this));
this.$.addTrainForm.addEventListener('iron-form-presubmit', function() {
this._presubmitted = true;
}.bind(this));
this.$.addTrainForm.addEventListener('iron-form-response', function() {
console.log(this._submitted);
console.log(this._presubmitted);
}.bind(this));
this.$.addTrainForm.addEventListener('change', function(event) {
// Validate the entire form to see if we should enable the `Submit` button.
this.$.send.disabled = !this.$.addTrainForm.validate();
}.bind(this));
}
static get properties() {
return {
categories: {
type: Array,
value: [
{"id":1, "category_name": "Diklat Teknis"},
{"id":2, "category_name": "PKP"},
{"id":3, "category_name": "Bimtek"},
{"id":4, "category_name": "Workshop"},
{"id":5, "category_name": "Training"},
{"id":6, "category_name": "Seminar"},
{"id":7, "category_name": "Diklat Fungsional"},
{"id":8, "category_name": "Diklat Kepemimpinan Tk. I"},
{"id":9, "category_name": "Diklat Kepemimpinan Tk. II"},
{"id":10, "category_name": "Diklat Kepemimpinan Tk. III"},
{"id":11, "category_name": "Diklat Kepemimpinan Tk. IV"},
{"id":12, "category_name": "Diklat Kepemimpinan Tk. V"},
{"id":13, "category_name": "Prajabatan"},
{"id":14, "category_name": "Struktural"},
{"id":15, "category_name": "Undefined"}
]
},
penyelenggara: {
type: Array,
value: [
{"id":1, "short_name": "BPSDMD Provinsi Jateng"},
{"id":2, "short_name": "BKD Provinsi Jateng"},
{"id":3, "short_name": "Disarsip Perpus Provinsi Jateng"},
{"id":4, "short_name": "Inspekorat Provinsi Jateng"},
{"id":5, "short_name": "BKPPD Kabupaten Kebumen"},
{"id":6, "short_name": "Bapelkes Gombong"},
{"id":7, "short_name": "Pusdiklat Regional Yogyakarta"},
{"id":8, "short_name": "Balai Diklat VIII Yogyakarta"},
{"id":9, "short_name": "Badan Diklat Yogakarta"},
{"id":10, "short_name": "Pusdiklatwas BPKP Bogor"},
{"id":11, "short_name": "Pusdiklat Reskrim POLRI"},
{"id":12, "short_name": "PKP2A I LAN Bandung"},
{"id":13, "short_name": "LAN RI"},
{"id":14, "short_name": "BPSDM Kemendagri RI"},
{"id":15, "short_name": "Undefined"}
]
},
formData: {
type: Object,
value: {}
},
error: String
};
}
_setRequestBody() {
this.$.addTrainAjax.body = this.formData;
}
postProcessing() {
this.$.addTrainAjax.url = 'http://127.0.0.1:5000/trains/';
// console.log(this.$.addTrainAjax.body)
var addform = this.$.addTrainForm;
if (addform.validate()) {
this._setRequestBody();
this.$.addTrainAjax.generateRequest();
this.error = ""
}
this.error = "Isi input semua data yang dibutuhkan..."
}
handleResponse(event) {
var response = JSON.parse(event.detail.response);
//if (response.id_token) {
// this.error = '';
// this.storedUser = {
// name: this.formData.username,
// id_token: response.id_token,
// access_token: response.access_token,
// loggedin: true
// };
// redirect to Secret Quotes
// this.set('route.path', '/trains');
//}
console.log("log response")
console.log(response);
// reset form data
this.$.addTrainForm.reset();
this.formData = {};
this.error = "";
}
handleError(event) {
this.error = event.detail.request.xhr.response;
}
}
//window.addEventListener('WebComponentsReady', function() {
// window.customElements.define(AddForm.is, AddForm);
// });
// tanpa ini, form input tidak ditampilkan di chrome, tak tahu kenapa ...
window.customElements.define(AddForm.is, AddForm);
</script>
抱歉，我无法正确格式化代码
答案
add-form子元素的主要问题是设置trainings的属性。您将需要使用this.set方法来观察可观察的属性更改。 （因此您无需刷新即可获得父级的新值）。简单，使用trainings属性有notify:true并定义新值如：this.set('traninigs', newTraninigsValue);但还需要将新值绑定到父母的traninigs：<add-form traninigs="{{traninigs}}"></add-form>
DEMO。
以上是关于在聚合物2.0中成功响应后，将显示纸-datatable-api绑定到阵列的主要内容，如果未能解决你的问题，请参考以下文章
AFNetworking 2.0 - 如何从子类 AFHTTPSessionManager 成功将响应传递给另一个类