将类用作飞镖聚合物元素的属性

Question

I have a polymer element, which needs to load some data from a web service.

<gallery-pol loader=""></gallery-pol>

@CustomTag('gallery-pol')
class PolymerGallery extends PolymerElement {
  @published GalleryDataLoader loader;
  ...
}

I don't want to have implementation of the data loading in my polymer element as it shouldn't be fixed to a specific web service.

What is the best way to pass an object which implements the actual data loading to my polymer element?

Should i just select my element in the main program and assign the loader the to element? Or is there some smother way to directly pass it as an attribute?

Thank you, lolsharp

Answer 1

I would consider modeling the loader as a custom element too. From there you have a few options on how they communicate.

One is to let the gallery find the loader as a child:

<z-gallery>
  <z-gallery-loader></z-gallery-loader>
</z-gallery>

Elements can also find each other via queries/ids or binding:

<z-gallery-view>
  <z-gallery-loader id="loader"></z-gallery-loader>
  <z-gallery loader="{{ $['loader'] }}"></z-gallery>
</z-gallery-view>

$[] in the context of a <z-gallery-view> Polymer element finds content by id. You could also bind to an id string and do the query yourself:

<z-gallery-view>
  <z-gallery-loader id="loader"></z-gallery-loader>
  <z-gallery loader="loader"></z-gallery>
</z-gallery-view>

A different approach is to communicate via events:

<z-gallery-loader on-load-gallery="{{ loadGallery }}">
  <z-gallery></z-gallery>
</z-gallery-loader>

<z-gallery> can fire 'load-gallery' (or maybe some more user-action centric event) custom events to request data to be loaded, and since it's included as the target of the event, the loader can do it's work and push the data back to the gallery.

If you don't want the containment relationship there, you can redirect events by having a different parent element that triggers events on the loader:

<z-gallery-view on-load-gallery="{{ loadGallery }}">
  <z-gallery-loader></z-gallery-loader>
  <z-gallery></z-gallery>
</z-gallery-view>

Where in this case loadGallery delegates to the loader child.