CODEWITHSUNDEEP
javascriptpolymer
Sudipta Roy
Sudipta Roy

Reputation: 758

A design issue with polymer

I am new to polymer. Currently I am stuck at a step which I don't know how to solve. Suppose I have an index.html in which I have used two components: <table></table> and <search></search>. The table uses a parameter items that holds the content of the table. And <search></search> basically searches from DB based on some search criteria. Now how to update the item parameter of the from inside the <search></search> element. I hope that I have made myself clear. If not, then please ask me . Thank you

Upvotes: 0

Views: 64

Answers (2)

Trey Eckels
Trey Eckels

Reputation: 348

There's different paradigms in which you could take this problem. One common paradigm is to keep 1-way data flow (known as data down, actions up), which is idiomatic to frameworks like React. Polymer can handle two-way binding, so you could also handle it this way.

I would

  1. Make a parent container that holds both your search and your table elements.
  2. Keep track of the current item that was searched upon in your parent container as a property
  3. Have a method that updates that current item property that takes in a parameter that represents the item the user selected
  4. Pass this method as a property into your table component
  5. Use iron-ajax component to fetch your data and assign the result to your items parameter Use another iron-ajax that takes in your search URL with a parameter
  6. Attach an onClick handler to the items in your table and have it call the method you defined earlier and use the item as an argument
  7. When the current item property on the parent component updates, this will trigger the iron-ajax to refetch the search query with the new item. when the new data comes up, it will automatically propagate that down to the search component, which should automatically update itself.

This is an example of the data down/actions up paradigm using a higher-order-component. that is your parent component in this case. it is coordinating the updating/flow of the other 2 components.

I added a plunkr so you can also see an example of polymer's 2-way binding. The main difference between this and the instructions above is that we are not passing any methods down from the parent to the children for the children to call. Instead we are enabling the data bindings to be bi-directional, which means that if the child updates a passed down property, the change will automatically propagate up without you having to intervene. You make a prop double bound by using the curly braces and not the bracket braces and in the property definitions of the child, set the notify property to true.

Which way you choose to go is up to you and your team. Some teams find that 2-way binding is difficult to reason about because it could be hard with deeply nested components to discover who changed a property. Passing down an action to deeply nested components in my opinion can also be confusing, so I am not necessarily against 2-way binding, which also got a bad name because early implementations of it in other frameworks had performance issues, but Polymer's in my experience does not.

Upvotes: 2

Deepak Jha
Deepak Jha

Reputation: 1609

You can alternatively make use of events to pass the data, answer given by Trey is also correct and his suggestion is apt. You should use parent component do all that hard work. However if you still wish to continue in the manner you have gone so far I suggest you use events to pass the data,

  handleIncomingData(e) {
    this.dispatchEvent(new CustomEvent('kick', {detail: {ajaxData: yourAjaxData}}));
  }

this snippet is adopted from the polymer site itself, make sure you pass the data using the detail property of the event.

Refer this link,

https://www.polymer-project.org/2.0/docs/devguide/events

Upvotes: 1

Related Questions