in polymer 0.5 a auto-binding template fired a "template-bound" event.
document.querySelector('#app').addEventListener('template-bound', function () {})
what would be the polymer 1.0 equivalent?
I have found a solution for this:
Update to 1.0 syntax: template-bound > dom-change
You can see the change in this commit of the StarterKit
https://github.com/PolymerElements/polymer-starter-kit/commit/eba941318b2816a2e9285d4214eb9a1a937781c9
Related
I'm wondering, is there a possibility to have databindings "out of" a template? Say I have a <template/>-Tag somewhere which I put into the slot of a different component - that component stamps it to its context. Then I want to bind data from the root element to the <template/>-Tag. Also, event bindings (on-x-changed) don't work, because you can't assign a function which is defined in the hosting component. Any ideas?
Example:
... host
{{boundData}}
<binding-component>
<template>
{{boundData}}
</template>
</binding-component>
I don't see changes when I observe boundData in the hosting component. Is there a way to get around this? Or is firing a custom event my only chance?
If you are looking for binding a property outside of polymer something like from index.html you may bind value with element. an example ; index.html
<dom-bind>
<template>
<binding-component bound-data="{{boundData}}"></binding-component>
</template>
</dom-bind>
<script>
// set a value a string, Number or Object etc.
// Optionally wrap this code into a listener ie;
// window.addEventListener('load', e=> { ...below code ... })
var boundData= document.querySelector('dom-bind');
boundData = {} //
</script>
Now in your binding-component element has a property as boundData
hope its helps or provide more code to understand better.
I've made it work the way dom-if does it, too. Like in dom-if (reference), I'm creating a Templatize-instance which then uses forwardHostProp to handle the "inside"-properties
this.__ctor = Templatize.templatize(template, this, {
mutableData: true,
forwardHostProp(prop, value) {
// handling item updates, item being the only property
// from within the binding component
// everything else is automatically bound by templatize
this.set(prop, value);
this.update(this.item);
},
});
this.__instance = new this.__ctor();
this.root.appendChild(this.__instance.root);
This all happens in connectedCallback.
Because the Templatize-instance is passed this, it's bound to the current context as well.
Good luck!
This question had been modified to match the actual problem.
The original question mistakingly focused on iron-ajax, please see the original problem below. The question should have been:
Please advice why child iron-ajax element is not ready during the 'ready' callback of my-component defined as follows:
<dom-module id="my-component">
<template>
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
<iron-ajax
id="selectionLoader"
url=""
method="GET"
handle-as="json"
debounce-duration="300"
last-response="{{ suggestedOptions }}"
last-error="{{ lastError }}"
verbose=true
>
</iron-ajax>
</template>
</dom-module>
<script>
(function () {
Polymer({
is : 'paper-select',
ready : function() {
console.log(this.$.selectionLoader.generateRequest); // undefined
}
})
})()
</script>
Original question
Original title: 'WebComponentsReady' fires before iron-ajax ready - Polymer 1.0
I need to assign some values to an observed property of a custom component that internally uses iron-ajax with disabled auto - so I need to call .generateRequest on the iron-ajax element. This should happen when host page/component is ready, in order to fetch from the server some defaults based on data in the host component code.
selected is an array property on the component observed like this:
observers: [
'_selectedChanged(selected.splices)' // _selectedChanged calls .generateRequest
]
The observer is triggered by:
window.addEventListener('WebComponentsReady', function() {
document.querySelector('paper-select').selected = [{id : 11855},{id : 11856}];
});
The problem is that WebComponentsReady fires before .generateRequest is available on the iron-ajax. So my component is initialized, _selectedChanged is called, but iron-ajax inside it is missing the method and in fact other properties/methods as well.
I've implemented a "deferred" workaround using setTimeout inside the component and it works like charm but it's obviously not the way. Also everything works if the observer is triggered some time later after the page load, e.g. by user's typing. This shows that the logic works, it's just the timing that is wrong.
What am I missing?
The real issue was having the html imports inside my component's <template>.
The 'wrong' order of events makes sense as iron-ajax is not even registered at the time when its host calls the 'ready' callback.
I've moved the imports outside <dom-module> and now everything works as expected.
In Polymer 0.5 I could do this
public action(event, detail, sender){
var help = sender.getAttribute('data-action');
// do something with this value
}
I got this value in Polymer 1.0 too. But I think this is not the official
method
detail.sourceEvent.path[2].getAttribute('data-action')
Can somebody show me the official way ?
I got the solution. Just write:
event.currentTarget.getAttribute('data-action')
I've try to use core-icon and layout element.
When I import core-icons.html, there's some error..
Uncaught TypeError: prototype.registerCallback is not a function
and there is any element display on the page.
What should I do to fix it.
- Using Polymer 0.9 and Elements (0.5)
Core Elements are not compatible with Polymer 0.9. Use iron-elements instead.
So I got the same error when I started using version 1.0 of Polymer.
Apparently I was using old syntax.
version 0.5 syntax:
Polymer('shape-menu',{
shapes: ['a'],
...
version 1.0 syntax:
Polymer({
is:"shape-menu",
shapes: ['a'],
...
During upgrade from very old Polymer to Polymer v1.7.0 I received this same error. To fix I noticed that I had accidentally migrated a function into the "properties" section rather than as a sibling to the "properties".
Broken:
<script>
Polymer({
is: 'my-comp',
properties: {
myprop: 'my value',
myfunction: function(){
...
},
},
});
</script>
Fixed:
<script>
Polymer({
is: 'my-comp',
properties: {
myprop: 'my value',
},
myfunction: function(){
...
},
});
</script>
Even though this question is marked as answered I thought this alternate fix might be useful to someone having this error for the same reason I did.
Before Polymer 0.8 we were able to stamp databound HTML in the DOM using injectBoundHTML. In 1.0 this function no longer exists. Is there an alternative way to do this?
Looks like you can set the innerHTML of your custom elements just like you would do to other elements.
Polymer({
is: 'x-custom',
ready: function() {
this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';
}
});
I am not sure if the Polymer team has implemented a special method like injectBoundHTML to do this.