I am tying polymer elements in with an existing framework and I am looking for a way to publish events to my framework when certain properties are set on my elements, but only when they are set from a source other then my framework.
For example, I have a custom input element with a "caption" attribute. If data binding inside my elements or some source other than my framework sets the caption property on my control, I want an event published to my framework informing it that the caption property changed, but if my framework sets the caption property, I do not want to publish the event.
I currently publishing these events in an observe block. I have a function on my elements called setFromExternalModel(prop, value) that I use to set the value of a property from my framework. If there were some way for me to pass data from this function on to the observe block, I could prevent the event from being published, but I haven't been able to come up with an elegant way to do this.
Thoughts?
Why is it important to not fire events if your framework changes a property?
It is much less complicated to treat all property changes the same way.
Polymer's core and paper elements have no concept of framework/user data changes, and we haven't thought of any use cases where this would be important.
Related
I've read various docs on Custom Elements and adoptedCallback, which say things like "called when the element is adopted into another document, i.e. when someone calls Document.importNode(customElement)". But this is not very much information.
What do I actually need adoptedCallback for? In other words, what will adoptedCallback be useful for in particular? What are some practical examples? What would a custom element author specifically want to achieve with adoptedCallback? What are scenarios that many custom element authors aren't thinking about, but that they should consider and handle in adoptedCallback?
The main use case that I see is when you want to move some custom elements.
If you have a custom element in an <iframe> and want it to move to another <iframe> or to the main document, you may want to realize some operations when the custom element owner document has changed, but not when the custom element was moved inside the same <iframe> or document.
Example: a IDE with drag and drop from the toolbar to the target HTML document.
Another use case, you may need to proceed to some expensive operations (calculation, data loading) in the custom element only one time when you import it (in adoptedCallck()), not everytime you connect it (in connectedCallback()).
Example: a sheet/table with remote data.
It was also the case with HTML Imports but now it's less relevant.
I have a situation in which I get data over a web socket, and performance is important. From the docs I understand that there are various ways of "pushing" the data I'm receiving to my Polymer elements, but I'm curious which one will be most efficient. So far I've created an element that can be included in a template, where the parent element will observe any changes in the data property and react accordingly. I've also been experimenting with using a Behavior to accomplish the same thing, though instead of needing to include a "data-element" in its template, it could just observe its own data property. I realize I could also use something like iron-signals to "push" the data via an event.
I'm not sure any of these methods are very efficient, since most of the time the changes to the "data" object will only apply to a small subset of all the observers. Another possible solution would be to "observe" a dynamic path, so like data.pathx instead of data.*, which would drastically reduce the number of times the observer callback gets fired, but I haven't come across anything that leads me to think that's possible, since each of my elements won't know if it should observe pathx or pathz until creation.
Like I said, performance is vital, and I feel there is way too much inefficiency if I have a small to medium sized dom-repeat of elements each observing a large data object of another element or individually holding a copy of that data on their own (like I assume a behavior would accomplish?).
I've looked at iron-meta, but I haven't been able to successfully data-bind to it, and from what I can tell from the docs, this data needs to be queried, whereas I need to be notified of changes.
Polymer doesn't really "observe" changes in elements. It just sets a setter for each property, and when it's called the UI is updated. So a dom-repeat template will not observe any change inside an object bound to it.
What could impact performance is unnecessary DOM manipulation, so if just a small subset of the data changes, re assigning all the array to the property is not ideal, and you should use notifyPath with just the sub property path and value that changed. Polymer will only update the DOM nodes affected.
If you have a way of knowing what sub properties changed in your data then you could obtain the object paths that have changed and call notifyPath for each of those and only a small number of DOM nodes will be changed.
Additional note:
If the number of elements in your array change, (added/removed) you should use the Polymer base array manipulation methods to update the property of your Polymer element, so it will change the DOM efficiently.
I'm trying to add a Polymer UI to an existing HTML page which contains a form. I don't have control over the content of the page, only the header and footer, so I can't change the form to use Polymer elements rather than <input>. So instead I'm trying to rewrite the form using Javascript.
I'm finding that adding an is attribute to an existing element has no effect --- the element doesn't get upgtaded.
I presume that this is all happening at a point after which Polymer has scanned the DOM looking for is attributes, so it's not noticing my change. (Although creating a new element with an is attribute and adding it also doesn't work, which is kind of weird, because adding a Polymer custom element does work.)
Is there any way around this; such as telling Polymer when I add the new element so that it can be upgraded properly?
To use is=, you must be extending a native element. These are called type extension custom elements (http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#usetypeextension).
In general, I don't believe adding the is= attribute at a later time has any effect on upgrading the element. The element needs to be declared up front with is= (e.g. <input is="core-input">) or instantiated dynamically using the special version of createElement:
var input = document.createElement('input', 'core-input');
In the declared case, this is the parsers signal to alter the prototype of the element when it's seen. In the JS case, that's done at creation time. If you just use el.setAttribute('is', 'core-input'), the element's prototype is already created by that point so it has no effect.
I have a list of elements of different types. Each has a toggle which toggles their visibility. Now there are two ways to hide an element either detach it from DOM or set the visibility to hidden.
As I understand Angular still updates hidden elements so this may impact the performance. Is this true? With jQuery one can detach the element from DOM and then attach it again when it needs to be visible. But is this approach even a good practice in Angular?
From reading Angular documentation and its API it gave me an impression that Angular prefers that all templates/HTML are declared at the start and their content is dynamically changed with controllers. So if you want to add/remove elements you'd use an ng-repeat directive and then by removing elements from an array in the scope you can add/remove elements from the template. This works well with primitive elements of the same type. However, how does this work if you have a list of elements of different type?
Edited:
http://jsfiddle.net/k26bA
An example here would be a list of tools which can be made available with a checkbox. In the example the first approach has a static list of elements which can not be dynamically changed. Which means you need to know in advance which tools will be available.
The second approach has a list in the controller to which you add and remove tools and in the template use ng-repeat to iterate over that list and create the tools. However, I'm stuck here as a tool can be a button, a text field, checkbox or even a complex div.
I find it a little hard to have a model first here because this is just a part that hides and shows available controls as opposed to displaying a domain model.
A good example of what I'm thinking would be Google Maps where you can hide or minimise various controls on the map.
You probably need to familiarize yourself with the ng-switch directive. The inactive items in an ng-switch are entirely unhooked from the DOM, as opposed to an ng-hide or ng-show, which simply set the CSS styles to show or hide.
I have a large application built in ExtJS and am looking for the best way to handle custom events from anywhere in the application. For example I might want to put an anchor tag in some text in the application which will open a custom component in my app. At the moment I listen to clicks on the body and if the target has a css class applied to it in a certain format I use that to perform an action.
For example I might have:
<a class="ACTION-View-Customers">View Customers</a>
My event handler will pull the classname apart and do the action. The problem with this approach is that it's difficult to pass many parameters through to the handler. What I propose is to use JSON inside the anchor's class or href tags, like so:
View Customers
Can you think of any problems with this approach and suggest any alternatives? Thanks.
I personally would not use additional meta in the HTML itself, if it can be helped. I would apply specific IDs to links of specific purpose, and bind a click event to that object. I've also found the DomQuery object (needed to find and reference the anchors) interesting to work with. Since I usually use the JQuery adapter with Ext JS, I'll use JQuery's selectors to locate the specific DOM element, and JQuery's bind functions [.click(fn)], while using Ext internal to the function itself. JQuery and Ext JS make a great combo, especially with the new JQuery 1.3.1, which really speeds things up.
I suggest using HTML5's data- attributes. For example:
View Customers
var eventsource = link.getAttribute("data-event");
HTH
As you might know, HTML tag accepts ANY named attribute. So you may create some specifically called attribute(s) and pass any value(s) to them (f.e. my-bogus-param="something"), By this you can develop any sophisticated parameter passing system. Then you can parse these attributes in event handler.