Component A:
<polymer-element name="componentA" extends="core-ajax" attributes="onComplete">
<script>
Polymer('componentA',{
requestCompleted: function(){
this.onComplete();
}
});
Component B:
<polymer-element name="componentB">
<template>
<componentA method="GET" onComplete="{{myCallbackFunction()}}"></componentA>
</template>
<script>
Polymer('componentB',{
name: 'doug',
myCallbackFunction: function(){
alert("this works!");
this.name='mike';
}
});
</script>
So my problem is that I can pass myCallbackFunction
in the attributes of componentA
and it'll execute it, alerting "this works!". However, componentB
name is still set to 'doug'. So I can successfully pass the function but how do I access component B's variables in that function?
Use events instead.
Component A:
<polymer-element name="componentA" extends="core-ajax">
<script>
Polymer('componentA',{
requestCompleted: function(){
// core-ajax already fires an event, but for demonstration
this.fire('complete');
}
});
Component B:
<polymer-element name="componentB">
<template>
<componentA method="GET" on-complete="{{myCallbackFunction}}"></componentA>
</template>
<script>
Polymer('componentB',{
name: 'doug',
myCallbackFunction: function(e){
alert("this works!");
this.name='mike';
}
});
</script>