In my Polymer app based Polymer Starter Kit, I've added basic authentication and switch between login and app views via <template is="dom-if" if="[[authenticated]]" restamp> element.
After successful authentication, the page should be updated, stamping the elements on the page. What I discovered that app.js can no longer find any of the elements by element id, like this: app.$$('#headerPanelMain').scrollToTop(true);. In fact, none of the queries with $$() work at all, returning null.
It seems as if $$() can't penetrate anything that is stamped with dom-if even though Polymer docs says it should: Polymer - Local DOM - Automatic node finding
I'm on Polymer 1.4 now.
Related
This page in the Polymer docs mentions
Since PouchDB can automatically synchronize data with a local IndexedDB database, it has never been easier to add offline-first data access to your progressive web app.
I'm pretty new to Indexeddb and pouchdb, and am having a hard time actually putting this into practice. My code so far:
<iron-ajax
auto
url="../data/some_data.json"
handle-as="json"
last-response="{{liveData}}">
</iron-ajax>
<app-indexeddb-mirror
key="thedata"
data="{{liveData}}">
</app-indexeddb-mirror>
<app-pouchdb-document
id="pouchdb"
db-name="data"
doc-id="thedata"
data="{{storedData}}">
</app-pouchdb-document>
<template is="dom-repeat" items="{{storedData}}" as="item">
<div>[[item.name]]</div>
</template>
The above doesn't work. And printing all documents of the pouchdb comes up empty. Can someone provide a working example? Or at least clarify the relationship between these two elements?
Pouchdb uses IndexDB directly, so you don't need to use app-indexdb-mirror.
I've got a newly created polymer starter kit, 1.3 to be exact.
I would like to created a method like the one below, on the index.html page
ready: function() {
firebase.auth().onAuthStateChanged(function(user) {
if(user) {
// console.log('user is logged in');
} else {
// console.log('user is not logged in');
}
});
}
On the main page, how can I do it? I would like to instantiate a Polymer element for the application template, but the document stays that should be avoided. If anyone could explain why that would be awesome.
Thanks in advance for any feedback!
On the main page, how can I do it?
In index.html, you could use a WebComponentsReady handler to perform any action that's dependent on all elements being registered:
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
...
});
I would like to instantiate a Polymer element for the application template, but the document stays that should be avoided.
Where did you see that? While version 1.3.0 of the Polymer Starter Kit uses an auto-binding template in index.html instead of an app element, I don't see why you'd try to avoid an app element. In fact, there's growing evidence that an app element is recommended:
Version 2 of Polymer Starter Kit replaces the auto-binding template with a custom app element
The dev guide describes the Basic Application Template (generated by polymer-cli) as a custom element:
The application template is the most basic starting point for any app built with Polymer. It starts with a single bare-bones custom element that can serve as the root of your application, from which you can build in any direction with maximum flexibility.
I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522
I'm trying to reduce the loading time for Polymer page which require lot of elements to be loaded.
So, Thinking about making elements loaded on demand, means once I use an element in the HTML code, if not loaded, it get loaded immediately.
Anybody have an idea how that can be done ?
Maybe some event is fired when unknown HTML element is being used ? So I can handle the loading using importHref() once that happen ?
It depends on your needs, there isn't a standard way of optimize it, but you can use Vulcanize tool and test perfomance.
If you don't want load all your webcomponents in one request, you can vulcanize all the elements that you need in your initial page/view. So, you'll load a set of elements in one request and use them in your first page.
Then, you can implement a lazy loading consisting on adding link tags to head section for each webcomponent. By this way, load process isn't been made during browser's parse task, so isn't blocking.
iron-lazy-pages may be useful to you:
<app-location route="{{route}}"></app-location>
<app-route
data="{{route_data}}"
pattern="/:page"
route="{{route}}"
></app-route>
<iron-lazy-pages attr-for-selected="data-route" selected="{{route_data.page}}">
<x-page1 data-route="page1" data-path="demo/x-page1.html"></x-page1>
<x-page2 data-route="page2" data-path="demo/x-page2.html"></x-page2>
<section data-route="page3">
My inline element.
</section>
</iron-lazy-pages>
You can install with the following:
bower install --save TimvdLippe/iron-lazy-pages
I am a complete noob at google Polymer. I am currently using Polymer 1.0. I am building a dashboard that actively displays the health status of servers. I have a function that grabs URLs from table X in a database, checks if they are responding, and then accordingly updates table X with "success" or "failure" for each of the URLs. I then have the table X rows show up as JSON text at a specific http URL. I used the iron-ajax element to access this URL and bind that JSON text to a polymer element. So when I go to my locally hosted website, I see a bunch of polymer element squares show up reading either success or failure. The problem is that I ping these URLs every 1 minute, but once the page is loaded, the polymer element squares showing the URL status do not change accordingly. So for example, lets say I go to my locally hosted website and it is showing that all of my URLs are responding. However, 2 minutes later, my scheduled function rechecks these URLs and updates table X in the database with a "failure" reading for one of the URLs. The polymer element on my locally hosted website won't refresh itself and display the failure status.
How do I make sure that any updates made to table X show up accordingly on the user interface. Is there a way to do this with Polymer?
Here is the piece of code I am working with:
<iron-ajax
auto="true"
url="http://localhost:1500"
last-response="{{statusSquare}}"
handle-as="json">
</iron-ajax>
<div class="body">
<template is="dom-repeat" items="{{statusSquare}}">
<div class="square">{{item.appName}}<br><br><br><span>{{item.statusURLTxt}}</span></div>
</template>
</div>