javascriptjquerymobilepolymer

Polymer JS passing function from one component to another?


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?


Solution

  • 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>