PassingData using app route in polymer - polymer

Question

I would like to pass the id of the selected grid using app-router. Somehow I seem to be missing a link. I want to be able to pass the id of the selected row from the grid and use that value in the iron-ajax url http://192.168.178.31:8080/demo/questions?assessmentId=TEST in place if assessmentId.
my-data.html
<dom-module id="my-data">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.title {
margin-left: 40%;
}
.card {
height: 100%;
}
</style>
<div class="card">
<div class="title">ASSESSMENTS</div>
<!-- Fetch an array of users to be shown in the grid -->
<vaadin-grid id="material" items="{{assessments}}" selected-items={{selectedItems}} active-item="{{selectedItem}}">
<vaadin-grid-selection-column auto-select frozen>
</vaadin-grid-selection-column>
<vaadin-grid-column>
<template class="header">Assessment Id</template>
<template>[[item.assessmentId]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Assessment Topic</template>
<template>[[item.assessmentTopic]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Assessment Subtopic</template>
<template>[[item.assessmentSubtopic]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Created By</template>
<template>[[item.createdBy]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Rating</template>
<template>[[item.rating]]</template>
</vaadin-grid-column>
</vaadin-grid>
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="assessment" href="[[rootPath]]assessment">Quiz Page</a>
</iron-selector>
</div>
</template>
<script>
class MyData extends Polymer.Element {
static get is() { return 'my-data'; }
static get properties() {
return {
index: {
type: Number,
value: 0
},
assessments: {
type: Array,
observer: 'isAssessmentLoaded'
},
selectedItem: {
type: Array,
},
selectedItems: {
type: Array,
},
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
routeData: Object,
subroute: String,
// This shouldn't be neccessary, but the Analyzer isn't picking up
// Polymer.Element#rootPath
rootPath: String,
};
}
constructor() {
super();
}
_selectedItemsChanged(selectedItem, selectedItems) {
console.log(selectedItems);
this.selectedItem = selectedItem;
}
isAssessmentLoaded(q) {
if (q) {
console.log('loaded questions', q); // questions are loaded.
}
}
redirect() {
page('/')
}
static get observers() {
return [
//'_routePageChanged(routeData.page)',
'_selectedItemsChanged(selectedItem, selectedItems)'
];
}
// _routePageChanged(page) {
// // If no page was found in the route data, page will be an empty string.
// // Default to 'assessments' in that case.
// this.page = page | 'assessment';
// // Close a non-persistent drawer when the page & route are changed.
// // if (!this.$.drawer.persistent) {
// // this.$.drawer.close();
// // }
// }
// _pageChanged(page) {
// // Load page import on demand. Show 404 page if fails
// var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
// Polymer.importHref(
// resolvedPageUrl,
// null,
// this._showPage404.bind(this),
// true);
// }
_showPage404() {
this.page = 'view404';
}
}
window.customElements.define(MyData.is, MyData);
</script>
</dom-module>
my-assessment.html
<dom-module id="my-assessment">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<!--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/questions?assessmentId=TEST"
handle-as="json"
last-response="{{repos}}">
</iron-ajax>
<template is="dom-if" if="{{repos}}">
<my-quiz repos= "{{repos}}"></my-quiz>
</template>
</template>
<script>
class Assessment extends Polymer.Element {
static get is() { return 'my-assessment'; }
constructor() {
super();
}
ready() {
super.ready();
this.$.requestRepos.generateRequest();
}
}
window.customElements.define(Assessment.is, Assessment);
</script>
</dom-module>

Answer 1

Here is how to change the route by clicking on the link:
<app-location
route="{{route}}"
use-hash-as-path="">
</app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<a name="some_name" href="#/some_route">Change route</a>