Default description
\n\n```\n\n```javascript\nimport TwoWayDataBinding from 'two-way-data-binding'\n\nTwoWayDataBinding()\n```\n\n### Update model via JavaScript\n\nYou can use deep objects too:\n\n```javascript\nconst proxy = TwoWayDataBinding({\n dataModel: {\n site: {\n name: 'My Awesome Site'\n }\n },\n})\n\nproxy.site.name = `New name`;\n```\n\n## Configuration\n\n### `$context`\n\nOptional. Defines the context of the data model. Defaults to `document`\n\n### `attributeBind`\n\nOptional. Defines the attribute to bind to in your HTML. Defaults to `data-bind`\n\n### `attributeModel`\n\nOptional. Defines the attribute to bind to in your HTML. Defaults to `data-model`\n\n```javascript\n$myInput.addEventListener('twowaydatabinding:change', () => {\n // This will be fired after the native change, after we update the state\n});\n```\n\n### `dataModel`\n\nOptional. Defines the data model. Defaults to `{}`\n\n### `events`\n\nOptional. Defines the events to bind to. Defaults to ```[`keyup`, `change`]```\n\n### `pathDelimiter`\n\nOptional. Defines the path delimiter in your `data-bind` attributes such as `header.site.name`. Defaults to `.`\n\n## Custom events handling\n\nIn order to allow consumers to perform actions **after** TwoWayDataBinding performs model update, a custom event is fired with the name `twowaydatabinding:change|keyup|eventname`. By default is dispatched in `change` and `keyup` events, but it can be extended by setting more `events` in the array of the TwoWayDataBinding configuration, meaning a `twowaydatabinding:[eventname]` will be fired after the logic is executed, and the consumer application can subscribe to them to perform any needed logic after the library has done the operations.\n\n### `twowaydatabinding:setcustomvalue`\nThis event works the other way round, from the consumer application to TwoWayDataBinding, which is listening to that event and responds by setting in the data model the value passed for a given property.\n\nThe library can prevent setting the value to the model for certain custom-value properties (see [attributeCustomValue](#attributecustomvalue)), and for those cases, a custom event `twowaydatabinding:setcustomvalue` can be fired in order to set a value into the model. A `twowaydatabinding:change` event is fired again after performing this action.\n\nTo set the new value in the data model, dispatch the event in the correspondant element passing a `detail` object populated with `path` (property path of the property to change in the data model object) and `value` properties.\n\nTo trigger it from your application:\n\n```javascript\ninput.dispatchEvent(new CustomEvent(`twowaydatabinding:setcustomvalue`, {\n bubbles: true,\n cancelable: true,\n detail: {\n path: input.getAttribute(config.attributeModel),\n value: dataValue\n }\n}));\n\nproxy.propName // 'newValue'\n```\n\n## Setting a custom value to a bound input instead of his value in the data model\n### `attributeCustomValue`\n\nOptional. Defines an array of attributes to prevent the model being updated with the input value when `change` or `keyup` by default. Defaults to `['data-value']`.\n\nIf an input has `data-model` and `data-bind` attributes at the same time, when this input value is changed, the model gets updated with that input `value` property. Nevertheless, this can be prevented by adding a custom attribute which will be the host of the actual value.\n\nBy default is `['data-value']` (but can be customised and extended), and when an input has one of these attributes, the model is not updated with the value of the input and it should be manually updated by the consumer's application logic by dispatching a custom event `twowaydatabinding:setcustomvalue`. See [Custom Events handling](#setcustomvalue)\n\n## Browser support\n\nThe script does **not** include any polyfills.\n\n| Browser | Version |\n|---------------|---|\n| Google Chrome | >= 96 |\n| Edge | >= 92 |\n| Firefox | >= 91 |\n| Safari | >= 15.4 |\n| Opera | >= 76 |\n| IE | ❌ |\n\n## How to develop\n\nYou might want to develop locally. Spawn a local server with:\n\n```bash\nnpm run develop\n```\n\nYou can change `/develop/index.html` and `/develop/index.js` to your liking.\n","readmeFilename":"README.md"}