When I route using app-route, the url changes but the data is displayed on the previous page itself. When I click on Quiz Page the data is displayed in the page from where it is clicked and not from the assessment page. How can I fix this?
my-data.html
<app-location route="{{route}}" use-hash-as-path>
</app-location>
<app-route route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{selectedItems}}">
</app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="my-data">
<a my-data="assessment" href="assessment/[[_computeId(selectedItem)]]">Quiz Page</a>
</iron-selector>
<my-assessment name="assessment"
ssessment = "{{selectedItems}}"></my-assessment>
my-assessment.html
<app-route
route="{{ssessment}}"
pattern="/:user_id"
data="{{routeData}}"></app-route>
<iron-ajax
id="requestRepos"
url="{{_computeId(routeData.user_id)}}"
handle-as="json"
last-response="{{repos}}">
</iron-ajax>
<template is="dom-if" if="{{repos}}">
<my-quiz repos= "{{repos}}"></my-quiz>
</template>
I issue was that I commented out Assessment.js from my main app page which did not render it. Now its working.
Related
I created app-route based project. Certain event I need to change the route to different root.
index.html
<my-app></my-app>
my-app.html
<!-- this app-route manages the top-level routes -->
<app-route
route="{{route}}"
pattern="/:view"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<!-- iron-pages selects the view based on the active route -->
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
<landing-app name="home" route="{{subroute}}"></landing-app>
<dashboard-app name="dashboard" route="{{subroute}}"></dashboard-app>
</iron-pages>
landing-app.html
When handler called I need to change the route to dashboard. How to do that ?
<dom-module id="landing-app">
<template>
<button on-click="_handlerCall">Change to Dashboard</button>
</template>
<script>
class LandingApp extends Polymer.Element {
static get is() {return 'landing-app'}
_handlerCall() {
this.set('route.path', '/dashboard') // but no luck :(
}
}
customElements.define(LandingApp.is, LandingApp);
</script>
</dom-module>
Add:
<app-location route="{{route}}"></app-location> after <template> in landing-app.html
<dom-module id="landing-app">
<template>
<app-location route="{{route}}"></app-location>
<button on-click="_handlerCall"> Change to Dashboard</button>
</template>
<script>
class LandingApp extends Polymer.Element {
static get is() {return 'landing-app'}
_handlerCall() {
this.set('route.path', '/dashboard') // :)
}
}
customElements.define(LandingApp.is, LandingApp);
</script>
</dom-module>
Documentation for app-location:
https://www.webcomponents.org/element/PolymerElements/app-route/elements/app-location
I am trying to replace a component on the screen using app-router element but it doesn't render anything. Below are the details.
There are two major elements in "my-element.html". One is the side bar and other is the main panel. I want to replace the main panel with appropriate element based on the route. However, it doesn't render any element but modifies the url.
Please help
my-element.html
<dom-module id ="my-element">
<template>
<paper-drawer-panel id="drawerpanel">
<aq-sidebar></aq-sidebar>
<app-router div="app-router" mode="hash">
<app-route path="/editor" import="../layouts/editor.html"></app-route>
<app-route path="/analyze" import="../layouts/analyze.html"></app-route>
<app-route path="/community" import="../layouts/community.html"></app-route>
</app-router>
</paper-drawer-panel>
</template>
<script>
Polymer({ is:'my-element',
listeners: {'change-menu': 'menuChanged',},
menuChanged(newMenu) { this.$$('app-router').go("/editor", {replace:true});}
})
</script> </dom-module>
aq-sidebar.html
<dom-module id='aq-sidebar'>
<template>
<paper-header-panel class='sidenav fit'>
<paper-toolbar>
<div class="title">AimsQuant</div>
<paper-icon-button icon="icons:menu" on-tap="toggleMenu"></paper-icon-button>
</paper-toolbar>
<paper-menu attrForSelected="data-panel" iron-select="onSelected">
<paper-icon-item noink data-panel="editor">
<iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon>
<span class="item-text">Editor</span>
<!--a is="pushstate-anchor" href="#/editor"></a-->
</paper-icon-item>
<paper-icon-item data-panel="analyze">
<iron-icon item-icon icon="vaadin-icons:chart"></iron-icon>
<span class="item-text">Analyze</span>
</paper-icon-item>
<script> Polymer({
is: 'aq-sidebar',
listeners: {
'iron-select': 'onSelected',
},
onSelected() {
this.fire('change-menu', {menu : this.menuSelected})
},
});
</script>
</dom-module>
First, this import style is strange, I do think that it would be right if you use the iron-selector to switch between the view components that you've made, and import then using the importHref function, also you should use the Set function of polymer to change the path instead of this Go function. like this:
<app-location route="{{ route }}"></app-location>
<app-route route="{{ route }}"
pattern="/:page"
data="{{ routeData }}"
tail="{{ subroute }}"></app-route>
<iron-pages role="main"
attr-for-selected="route"
selected="[[ page ]]">
<my-editor route="editor"></my-editor>
<my-analyze route="analyze"></my-analyze>
<my-community route="community"></my-community>
</iron-pages>
<script>
Polymer({
is:'my-element',
properties: {
page: {
type: String,
notify: true,
reflectToAttribute: true,
observer: "_pageChanged"
}
},
observers: [
"_routePageChanged(routeData.page)"
],
_changeRoute: function(e) {
this.importHref(
this.resolveUrl("my-" + e.detail.requestRoute), null, null, true);
this.set("route.path", e.detail.requestRoute);
},
_routePageChanged: function(page) {
this.page = page || "list";
},
})
</script>
In my index.html I have a paper-scroll-header-panel with a paper-toolbar and a custom element serving as the page content:
<body unresolved>
<template is="dom-bind" id="app">
<paper-scroll-header-panel>
<paper-toolbar class="medium-tall">
...
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<x-content></x-content>
</div>
</paper-scroll-header-panel>
</template>
</body>
In x-content, I have a firebase-collection which I am looping over to show data:
<dom-module id="x-content">
<template>
<firebase-collection
limit-to-first="30"
location="myFirebaseURL"
data="{{items}}"></firebase-collection>
<template is="dom-repeat" items="{{items}}">
<x-item item="{{item}}"></x-item>
</template>
</template>
<script>
Polymer({
is: "x-content",
_loadMoreData: function (e) {
// load more
}
});
</script>
</dom-module>
I want to be able to load more data when the user scrolls. I have tried implementing the iron-scroll-threshold but it is not working. I expect I need to use the scrollTarget attribute to link it to an element which will fire the scroll event but I'm not sure which element I should use.
I have tried setting it to body, document and the paper-scroll-header-panel but none of these are working when I scroll - some are even firing on page load when no scrolling is happening!
Has anyone tried this?
You could try to link to paperScrollHeaderPanel.scroller
and make sure when loading the data function to clear the triggers:
scrollThreshold.clearTriggers();
see this
Is something like this posible outside a Polymer element?
I want to be able to get data from a json and insert it as menu items, but what works fine inside a polymer element won't work here. Is there something I'm missing or this is impossible?
<html>
<head>
[...]
</head>
<body>
<core-toolbar>
<paper-menu-button id="dropDownMenu">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item>Escritorio</paper-item>
<template is="auto-binding">
<custom-item-list id="list" items={{items}} jsonurl="postsESTADO CIVIL.json"></custom-item-list>
<hr />
<template is="auto-binding" repeat="{{item in items}}">
<paper-item>
{{item.name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
</template>
<paper-item>Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
</body>
</html>
EDIT
I'm trying a new approach, as seen in the Polymer Single Page Application.
So far I'm still stuck. This is how my code looks right now:
<paper-menu-button id="dropDownMenu" style="display:none;">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item onclick="menuBackClick()">Escritorio</paper-item>
<hr />
<template repeat="{{menuit, i in menuits}}">
<paper-item>
{{menuit.Name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
<paper-item onclick="panercontrol()">Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
And this is the script I'm using, it gets the json from a file, extracts the data from it and then uses it.
<script>
$.getJSON('api/mainmenu.json', function (data) {
var template = document.querySelector('#fulltemplate');
var itemsstring = JSON.stringify(data);
template.menuits = itemsstring;
});
</script>
At the moment it doesn't do anything, inspecting it returns plain <template repeat="{{menuit, i in menuits}}"></template> with nothing in it.
The #fulltemplate Template wraps all the content inside the body.
I begin using Polymer. It is great thing. Thanks to all conributors.
I have core-menu and core-pages elements.
<polymer-element name="my-element">
<template>
<style>
</style>
<core-menu selected="0" id="core_menu">
<core-item on-tap="{{sel_brosh}}" label="Broshura"></core-item>
<core-item on-tap="{{sel_list}}" label="Listovka"></core-item>
</core-menu>
<core-pages selected="0" id="sec_pages">
<section id="sec_brosh">Page One</section>
<section id="sec_list">Page Two</section>
</core-pages>
</template>
<script>
Polymer('my-element', {
sel_brosh: function () { this.$.sec_pages.selected = "0"; },
sel_list: function () { this.$.sec_pages.selected = "1"; },
});
</script>
</polymer-element>
It work as i want, but i think it is not 'best practice'. How can i make it with one function? I try to get value this.$.core_menu.selected, but i get only old value.
May be i chose a wrong way. I want get a few "pages" with simple menu which switching pages.
Try this:
<polymer-element name="my-element">
<template>
<core-menu selected="{{selected}}">
<core-item label="Broshura"></core-item>
<core-item label="Listovka"></core-item>
</core-menu>
<core-pages selected="{{selected}}">
<section>Page One</section>
<section>Page Two</section>
</core-pages>
</template>
<script>
Polymer({
selected: 0
});
</script>
</polymer-element>
ProTip: the MVC concept of Polymer is that the my-element has a data-model that informs it's children. I mention this because it's easy to look at this and say oh, core-menu and core-pages are data-bound, but the better description is that core-menu and core-pages are data-bound to my-element. The host, my-element, is in control (hence controller [or maybe more precisely presenter in an MVP pattern]) and the children don't interact with each other directly.