https://github.com/juicy/dom-bind-notifier

Notifies Polymer 1.x template binding (dom-bind) with puppet changes
https://github.com/juicy/dom-bind-notifier

polymer

Last synced: 11 days ago
JSON representation

Notifies Polymer 1.x template binding (dom-bind) with puppet changes

• Host: GitHub
• URL: https://github.com/juicy/dom-bind-notifier
• Owner: Juicy
• License: mit
• Created: 2015-10-07T12:50:03.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-18T13:42:50.000Z (almost 8 years ago)
• Last Synced: 2024-10-10T10:15:52.212Z (about 1 month ago)
• Topics: polymer
• Language: HTML
• Homepage: http://puppet.github.io/dom-bind-notifier/
• Size: 42 KB
• Stars: 0
• Watchers: 11
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <dom-bind-notifier>

> Adds good old Object.observe to Polymer 1.x template binding (dom-bind)

So you no longer have to worry about notifying your elements.

With single element, you get real TWO-way data-binding for HTML Templates.

DOM stays in sync with any JS object you provide.

## Demo

[Check it live!](http://Juicy.github.io/dom-bind-notifier)

m   

## Install

Install the component using [Bower](http://bower.io/):

```sh

$ bower install dom-bind-notifier --save

```

Or [download as ZIP](https://github.com/Juicy/dom-bind-notifier/archive/master.zip).

## Usage

1. Import polyfills, if needed:

    ```html

    

    

    

    

    

    

    ```

2. Import Custom Element:

    ```html

    

    ```

3. Start using it!

    ```html

    

      

      
{{path.to.my.magic}}

      

      

    

    ```

    Use it always inside `dom-bind`, preferably as the last child.


## Object.observe

Please note, that we use [`Object.observe` & `Array.observe`](http://wiki.ecmascript.org/doku.php?id=harmony:observe), so if your environment does not support it, you will need a shim (for example [MaxArt2501/object-observe](https://github.com/MaxArt2501/object-observe) + [MaxArt2501/array-observe](https://github.com/MaxArt2501/array-observe)).

## Polymer 0.5.x to 1.0.x

If your old code looked as follows:

```html

    Company name 

    
Employee list:

    

        
★

    


 document.getElementById("root").model = my_DB_data_handle_by_my_awsome_app;

```

You can now get same behavior in Polymer 1.0.x with:

```html

    Company name 

    
Employee list:

    

        
★

    

    


 document.getElementById("root").model = my_DB_data_handle_by_my_awsome_app;

```

## Options

Attribute         | Options   | Default | Description

---               | ---       | ---     | ---

`path`            | *String*  |         | (**required**) Path of observed object in scope of `ref`erenced `dom-bind`

`deep`            | *Boolean* | `false` | Should we observe objects deeply

`ref`             | *String*  |         | Id of `dom-bind` element to notify, if not given will use next sibling, or containing dom-bind.

`observed-object` | *Object*  |         | Object to bind to, if other `dombind.get(path)`

## Events

Event    | Details                                       | Description

---      | ---                                           | ---

`change` | *Array* of changes in `Object.observe` format | Triggers when `dom-bind` gets notified with some changes

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -m 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## History

For detailed changelog, check [Releases](https://github.com/Juicy/dom-bind-notifier/releases).

## License

MIT