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.
Related
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.
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>
In an attempt to create polymer elements that use requirejs modules I ran into a blocking issue. I understand that polymer is not designed to work with requirejs, but for the time being It is my only option.
Searching for answers I found two solutions:
Don't use requirejs and make your modules compatible with HTML imports.
Put Polymer() call inside the requirejs callback as described here
Since I have to use require, at least for the time being, I went with the solution no.2. However, it turns out the solution causes asynchronous delays of element registration and incorrect data binding prior to Polymer upgrading the element.
Digging deeper into this issue, I started hacking undocumented Polymer internals with an intention to stop Polymer entirely until requirejs does its thing. Here is what I came up with:
Polymer.require = function(tag, deps, func) {
var stopper = {}
Polymer.queue.wait(stopper);
require(deps, function() {
delete stopper.__queue;
Polymer.queue.check();
Polymer(tag, func.apply(this, arguments));
});
};
I know this is terribly wrong. Is there a better solution?
I found that if I embed the call to require within the Polymer script I avoid this issue.
<link rel="import" href="../polymer/polymer.html"/>
<script src="../requirejs/require.js"></script>
<script src="../something/something.js"></script>
<polymer-element name="some-component">
<template>...</template>
<script>
(function() {
Polymer('some-component', {
someMethod: function () {
require(['something'], function (Something) {
var something = new Something();
...
}
}
)();
</script>
</polymer-element>
So there's this solution from Scott Miles but I find it a bit simplistic and inflexible as it relies on:
<script> tags to be executed in order, therefore ruling out:
async script tags
xhr based script loading
polymer getting loaded from a <script> tag, therefore:
layout.html and associated css won't be loaded
any future call to polymer.html won't be deduped
If you want more control over your bootstrapping logic you will need to enforce some amount of synchronisation between your components (which is what both requirejs and polymer are competing to do) before those are fully loaded.
The previous example is a more declarative (read polymer) way of doing things but falls short of fine grained tuning. I've started working on a repository to show how you can fully customise your load ordering, by using a more imperative approach where requirejs is given priority to orchestrate the rest of the bootstrapping.
At the time of writing, this extra control comes at the price of worse performance as the various scripts can't be loaded in parallel but I'm still working on optimising this.
In most of the examples I've seen for creating elements the script that registers the element is defined in the component's HTML file, e.g.
<link rel="import" href="/components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
...
</template>
<script>
// convenience wrapper for document.registerElement
Polymer('my-element', {
...
});
</script>
</polymer-element>
It's possible to do that registration in an external script instead, e.g.
<script src="my-element.js"></script>
That seems like an attractive option because the script then becomes visible to tools like JSHint, but then you lose the automatically generated documentation of attributes, etc.
Is there a workflow or set of tools that help you get the best of both worlds?
e.g. combine a raw template and script into a single HTML file in a similar way to preprocessing CSS with Sass?
Yes. Polymer supports registering an element with by referencing an external script. See http://www.polymer-project.org/docs/polymer/polymer.html#separatescript. An original reason the element is in the call to Polymer() is to support this. It associates the definition with the script.