I am trying to use a js library across my elements with the help of core-shared-lib element. Apparently, I need to perform an operation as soon as the library loads, and the Polymer's ready event gets fired before the library is downloaded. Is there a way that I can bind an event to core-shared-lib element so that I can execute that library's functions.
Thank You
There is a on-core-shared-lib-load event according to docs. Try that
<core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">
Related
I've seen people adding the event listener on the "ready" function and others on "connectedCallback". My question is, what are the pros and cons of each place? On connected we are responsible to remove it; in ready, it will stay there, and I'm unsure if it is a problem.
Should I do this:
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', this.myFunction.bind(this));
}
disconnectedCallback() {
super.disconnetedCallback();
this.removeEventListener('click', this.myFunction);
}
Or this:
ready() {
super.ready();
this.addEventListener('click', this.myFunction.bind(this));
}
Up until Polymer 1.x.whatever , the ready callback in the life cycle of an element, was called, once
the element registered its shadow DOM
any <content>'s were distributed
and then, post ready , attached was fired
So, you could possibly have used ready as a one time callback after everything was indeed ready
With Polymer 2.0 onwards, there have been contractual changes to how callbacks are fired, and
The ready callback no longer is guaranteed to execute after the new <slots> are distributed meaning, there is no surety that the ready itself will wait for content / light DOM distribution.
attached is now the new connectedCallback and is essentially useful for element level DOM manipulations such as setting attributes , appending children etc. This is a lifecycle change that happens after the slot nodes are distributed and the element itself is attached in the DOM hierarchy, but not necessarily after a paint.
SO, for any event that does not rely on any ::slotted content, use the ready callback
for anything that requires a knowledge of all distributed content along with the shadow DOM, use the connectedCallback
However, when possible, use the afterNextRender method of the super class Polymer , within your element's callback to add event listeners
these are what I could possibly think of.
All this and much more, if it helps, here
I haven't yet read about us having to remove an event listener from a lifecycle callback, or anything as such.
If you are referring to cases where, the element itself may be connected and disconnected dynamically / or in the flow of things,
And, with that in mind, you are adding an event listener on a global / native element within your element's life cycle callbacks ,
like attaching an event listener on the window inside your custom-element's ready or connectedCallback ,
Only in such cases, does polymer advise you to remove the event listener on disconnect
What invalidateProperties(), invalidateSize() and invalidateDisplayList() methods are did when extending a component in adobe flex/air ?.
And why these are necessary?
As per the documentation, these functions signal flex/flash to call another function before updating and rendering the display list. This "other function" seems to be for validation (and possibly altering the values if they're incorrect). So by calling an invalidate function, you force a recalculation. Or, in other words, a redraw. This removes any left over graphical artifacts.
That's my explanation via the documentation. Perhaps someone with more experience can build upon my answer.
All these components are based upon the RENDER event so no matter how many changes they go through (ex: x, y, width, etc ...) they are drawn only once per frame. But to get the RENDER event to trigger for each component a stage.invalidate() must be called and parsed on a per component basis. All the component invalidate methods allow you to force a redrawing of the component by skying the RENDER event step or in other cases by starting the RENDER event workflow.
I was drawn to the idea of a "VanillaJS" approach mentioned by http://customelements.io/ for https://github.com/webcomponents/element-boilerplate . This drew me to http://www.polymer-project.org/platform/custom-elements.html (since I would like to do everything I can in JavaScript rather than use <link/> to do imports).
However, it seems that, contrary to the spirit of VanillaJS and polyfills, they seem to require their own custom "WebComponentsReady" event. (To me a polyfill is something which completely follows a standard or proposed standard, and lets you merely remove a script tag or load when it is fully supported and not need to change any other code.)
(Mozilla's x-tag (which is also not clear on whether it can be used purely as a polyfill or whether one requires the xtag global) uses a "DOMComponentsLoaded" event which I am not clear is standard.)
Neither event is mentioned at http://www.w3.org/TR/custom-elements/
Any way to work with these to use a standard event or avoid these otherwise without polling?
UPDATE
I see from http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0697.html that the "WebComponentsReady" event was discussed as being a candidate for specification but had not (at least at that time) been added, so I guess this event may be the safest bet since Mozilla's x-tag does use it internally immediately before firing its own "DOMComponentsLoaded" event and it was at least discussed as a possible candidate for standardization. :)
Neither event is part of the standards. Both Polymer's WebComponentsReady and x-tag's DOMComponentsLoaded are fired for convenience. This is one of those things you'd have to do yourself without a sugaring library. I suspect x-tag's fires hooks into the WebComponentsReady event because it uses the same set of polyfills as Polymer.
BTW, one reason to use an HTML Import (<link rel="import">) to load components is that you get aload` event. That could be one signal the component is ready.
I have code like this, using jQuery-svg
function replaceRaster(){
$('#png').remove()
a = $('#graphic')
b = a.svg(a)
a.load('IDC_Energy.svg',
{onLoad:bind} )
svg = document.getElementById("graphic").children[0]
console.log(svg)
svg.addEventListener('load', bind)
}
The event handler, bind, is fired before jQuery-svg-dom is able to select elements within the SVG data. My code is supposed to look over the SVG and assign various classes and attach listeners to various elements, but it's not able to find any. If I call bind in the console after everything is loaded it can find alll the SVG elements.
Am I doing something wrong? Is there another way to detect when the SVG DOM is available? I've thought of using a timer, but that's really hacky, especially considering my SVG files could be a few MB large.
Have you tried using a timer with a timer delay of '0' or perhaps just '10'? I've frequently used this technique to push the work out of the current run loop as timers are fired after the redraw ghas completed. With luck the bind will only be fired once the repaint has finished. I'm not sure whether this will help in your particular instance because I don't know what else you are doing in the page - it won't help, for example, if you have some asynchronous data handling going on.
I've embedded a qooxdoo widget (the table) within an existing web app using inline integration (http://qooxdoo.org/documentation/0.8/ui_inline).
Is it possible to raise an event in the widget that can be handled externally within the main web app? Specifically I want to raise a "row selected" event when the user selects an item in the table.
Thanks,
Paul
afaik the table selection model has the event "changeSelection".
tableInstance.getSelectionModel().addListener("changeSelection", yourListener, yourContext);
With this event you can get the necessary infos within your listener method and fire an event to a DOM element which any JS library can use to listen to.
qx.event.Registration.fireEvent(document.body, "rowSelected", qx.event.type.Event);
You can fire the event at every DOM element you like to. In your case you can use jQuery to listen to the event and get the infos.
Hope that helps you further.
Regards,
Alex