https://github.com/alvarobrito/provider-behavior
Data provider to manage custom data for polymer components
https://github.com/alvarobrito/provider-behavior
behavior polymer provider web-components
Last synced: 9 days ago
JSON representation
Data provider to manage custom data for polymer components
- Host: GitHub
- URL: https://github.com/alvarobrito/provider-behavior
- Owner: alvarobrito
- Created: 2017-02-05T16:46:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-06T09:30:00.000Z (about 9 years ago)
- Last Synced: 2026-01-22T16:29:33.369Z (about 1 month ago)
- Topics: behavior, polymer, provider, web-components
- Language: HTML
- Homepage:
- Size: 18.6 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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](https://github.com/reactjs/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
```html
- [[item.value]]
```
> 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
```html
Polymer({
is: "provider-element",
behaviors: [Polymer.ProviderBehavior],
add: function (newItem, reflect) {
this.set(this.data.concat([newItem]), reflect || false);
}
});
```
> 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.
```html
Polymer({
is: "smart-component",
addElement: function (e) {
this.$.provider.add(e.detail);
},
addAndReflect: function (e) {
this.$.provider.add(e.detail, true);
}
});
```
> 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.
```html
- [[item.value]]
Add
Add and reflect
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'
});
}
});
```
> 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](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve -o ` to serve your application locally.