I have a v-fire Polymer :
<script>
Polymer({
is: 'v-fire',
properties : {
onFire: {
type : String,
reflectToAttribute: true
}
},
firing: function () {
this.fire('fire');
}
})
</script>
I want to be able to use it anywhere in my Polymer elements to make them trigger an internal function to make them perform a specific task like update, so they get all updated when the v-fire is calling firing.
For instance, I make a new object to test :
<script>
Polymer({
is: 'fire-tester',
_updateContent: function () {
alert('I get updated');
}
});
</script>
in index.html
…
<link rel="import" href="/components/fire-tester/fire-tester.html">
…
<body>
<fire-tester id="fire-tester"></fire-tester>
<script>
(function () {
var ft = document.getElementById('fire-tester');
// make a global v-fire Polymer
var vfire = document.createElement('v-fire');
// custom callback of the Polymer's that will include the v-fire
vfire.onFire = '_updateContent';
/**
* And here, I try to insert the v-fire in the fire-tester Polymer
*/
Polymer.dom(ft.root).insertBefore(
vfire,
Polymer.dom(ft.root).childNodes[0]
);
// the dom is pretty neat, fire-tester contains v-fire with the custom on-fire callback
// then I try to fire the event
vfire.firing(); // but nothing happen
});
</script>
It doesn't work because I believe the v-fire is not processed when inserted in fire-tester. Is there a way to tell Polymer to process the chunk of dom as if it was declared in the local DOM ?
It looks like you're approaching the events system incorrectly. What you want is to run a method on
fire-testerwhen it detects thefireevent on the childv-fireelement, correct? This is how I would put that together:v-fire.html
fire-tester.html
index.html