Polymer 1.x: call functions between iron-pages and pass data when role=“main”

0
votes

I have project structure like

<my-app></my-app> //in index.html

and in my-app.html I have iron-page, inside I have 3 components

<iron-pages selected="0" role="main">
  <my-page1></my-page1>
  <my-page2></my-page2>
  <my-page3></my-page3>
</iron-pages>

How to call a function along with parameter in my-page2.html from my-page1.html?

The method which I'm using now is I'll have an attribute to both the pages with notify:true for upward data flow in my-page1.html and adding an observer to that attribute in the second component, so when I assign the observer will call!

<iron-pages selected="0">
  <my-page1 data-prop1={{dataProp1}}></my-page1>
  <my-page2 data-prop2=[[dataProp1]]></my-page2>
  <my-page3></my-page3>
</iron-pages>

here for data-prop2, I'll add an observer so when I assign data for data-prop1 in my-page1.html observer get called in my-page2.html

In my opinion, this is not the right method! so this.fire can only be used to trigger a function from child to parent, so if I need to communicate specific function between the components or child siblings what I should do?

2
polymerpolymer-1.0progressive-web-appspolymer-starter-kit

2 Answers

0
votes

Communication through data model is the recommended method. (Let me fetch you reference, later.)

It's also recommended to watch Rob talking about unidirectional data flow movement, https://www.youtube.com/watch?v=iJ9hS54BRag#t=11m7s

0
votes

What i am doing is, using querySelector to get an instance of the page and call the method in that.

as follows:

var myPage2 = null;
myPage2 = document.querySeletor('my-page2');
// Now call your function from here
myPage2.yourFunction(param1, param2);

`

and your my-page2 will have the yourFunction function.