如何将polymer 2.0中一页的数据用于另一页
我有一个html文件,它进行rest调用并获取数组中的数据。我怎样才能将此文件用于其他文件。我希望能够访问和操作数据,并在单击“下一步”按钮时打印数组中的每个元素如何将polymer 2.0中一页的数据用于另一页,polymer,Polymer,我有一个html文件,它进行rest调用并获取数组中的数据。我怎样才能将此文件用于其他文件。我希望能够访问和操作数据,并在单击“下一步”按钮时打印数组中的每个元素my assessment.html包含加载的数据,而my quick.html应包含循环浏览数据的下一个和上一个按钮 my-assessment.html <link rel="import" href="../bower_components/polymer/polymer-element.html"> <link
my assessment.html
包含加载的数据,而my quick.html
应包含循环浏览数据的下一个和上一个按钮
my-assessment.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer-simple-slider/simple-slider.html">
<link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="my-assessment">
<template>
<button on-click="getAssessment">Load Assessment</button>
<!--Check the url is correct ! And last responce property should be {{}} instead [[]] (as up way data binding) -->
<iron-ajax
id="requestRepos"
url="http://192.168.178.31:8080/demo/assessment"
handle-as="json"
last-response="{{repos}}"
</iron-ajax>
</template>
<script>
class Assessment extends Polymer.Element {
static get is() { return 'my-assessment'; }
static get properties() {
return {
repos: {
type : Array,
observer : 'isQuestionsLoaded'
}
}
}
// set this element's employees property
constructor() {
super();
}
isQuestionsLoaded(q) {
if (q) {
console.log('loaded questions', q); // questions are loaded.
}
this.questions = q;
}
getAssessment() {
this.$.requestRepos.generateRequest();
}
}
window.customElements.define(Assessment.is, Assessment);
</script>
</dom-module>
负荷评估
在上面显示的示例中,这两个元素彼此具有子-父关系。“我的测验”元素包含“我的评估”元素。从它的子元素向上传递数据可以通过双向数据绑定来完成。因此,您必须将notify:true添加到repos属性中,并使用双向数据绑定语法,如我的示例所示。
子元素属性:
static get properties() {
return {
repos: {
type : Array,
notify: true,
observer : 'isQuestionsLoaded'
}
}
}
父元素:
<dom-module id="my-quiz">
<template>
<my-assessment repo-data="{{repos}}"></my-assessment>
</template>
<script>
class Quiz extends Polymer.Element {
static get is() { return 'my-quiz'; }
static get properties() {
return {
repoData: {
type: Array,
observer: '_dataChanged'
}
}
}
constructor() {
super();
}
_dataChanged(data) {
console.log('Data changed:', data)
}
}
window.customElements.define(Quiz.is, Quiz);
</script>
</dom-module>
类。元素{
静态get是(){返回“我的测验”;}
静态获取属性(){
返回{
报告数据:{
类型:数组,
观察者:''u dataChanged'
}
}
}
构造函数(){
超级();
}
_数据更改(数据){
console.log('数据已更改:',数据)
}
}
window.customElements.define(quick.is,quick);
如您所见,我使用了双向数据绑定语法{{}来获取从您的子元素发送的数据。将在控制台中观察并记录更改。
要了解更多信息,您可以查看聚合物
<dom-module id="my-quiz">
<template>
<my-assessment repo-data="{{repos}}"></my-assessment>
</template>
<script>
class Quiz extends Polymer.Element {
static get is() { return 'my-quiz'; }
static get properties() {
return {
repoData: {
type: Array,
observer: '_dataChanged'
}
}
}
constructor() {
super();
}
_dataChanged(data) {
console.log('Data changed:', data)
}
}
window.customElements.define(Quiz.is, Quiz);
</script>
</dom-module>