alvarobrito / provider-behavior

Data provider to manage custom data for polymer components

provider-behavior

Behavior to provide data for components. You can use this Behavior for polymer elements which manage data from API, automatically your data is stored in a closure for state control of your application. Based on redux, but only using the mono-state pattern (Singleton with sugar!).

Behavior API

method	Params	Description
get()		Gets data from iron-ajax. You can add auto property in provider-element to get data and render it automatically
set(data,reflect)	ArrayObject, Boolean	Updates store with the new data, reflect true to apply updating for all same providers.
clearStore()		Clears store, only removes data associated to its tagName (eg. all 'PROVIDER-ELEMENT')

How to use

Data binding from a declarative provider

<provider-element auto data="{{dataFromProvider}}"></provider-element>
<ol>
  <template is="dom-repeat" items="[[dataFromProvider]]">
    <li>[[item.value]]</li>
  </template>
</ol>

provider-element is using the provider-behavior, it automatically gets data from the iron-ajax element and sets result in its data property.

Using a provider method from an external element and reflecting the updated data

<dom-module id="provider-element">
  <template>
    <iron-ajax
      id="api"
      url="assets/data.json"
      handle-as="json">
    </iron-ajax>
  </template>

  <script>
    Polymer({
      is: "provider-element",

      behaviors: [Polymer.ProviderBehavior],

      add: function (newItem, reflect) {
        this.set(this.data.concat([newItem]), reflect || false);
      }
    });
  </script>
</dom-module>

You can set data and update all providers which are using the same data in the store. If you want to get that, only pass a second param to true as value.

<dom-module id="smart-component">
  <template>
    <provider-element id="provider" auto data="{{dataFromProvider}}"></provider-element>
    <dumb-component collection="[[dataFromProvider]]" on-add="addElement" on-add-reflect="addAndReflect"></dumb-component>
  </template>

  <script>
    Polymer({
      is: "smart-component",

      addElement: function (e) {
        this.$.provider.add(e.detail);
      },

      addAndReflect: function (e) {
        this.$.provider.add(e.detail, true);
      }
    });
  </script>
</dom-module>

provider-element contains an add method to add new data in the store and reflects this change to all providers which are using this data.

<dom-module id="dumb-component">
  <template>
    <ol>
      <template is="dom-repeat" items="[[collection]]">
        <li>[[item.value]]</li>
      </template>
    </ol>
    <button type="button" name="button" on-click="add">Add</button>
    <button type="button" name="button" on-click="addAndReflect">Add and reflect</button>
  </template>

  <script>
    Polymer({
      is: "dumb-component",

      properties: {
        collection: {
          type: Array
        }
      },

      add: function() {
        this.fire('add', {
          id: Math.random(),
          value: 'New item collection'
        });
      },

      addAndReflect: function() {
        this.fire('add-reflect', {
          id: Math.random(),
          value: 'New item collection'
        });
      }
    });
  </script>
</dom-module>

dumb-component only fires events which are managed by the smart-component

Try the provider-behavior demo

First, make sure you have the Polymer CLI installed. Then run polymer serve -o to serve your application locally.