{"_id":"reactive-component","_rev":"59-9af2e1932bd0f837a77fc7e828cdf2a5","name":"reactive-component","description":"Reactive template engine with data bindings","dist-tags":{"latest":"0.13.2"},"versions":{"0.0.1":{"name":"reactive-component","description":"Reactive template engine","version":"0.0.1","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.0.1","dist":{"shasum":"2423931299b3746f5086866f809ed5f1d30f0ae6","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.0.1.tgz","integrity":"sha512-rBYcLOT2FC173WOcYXQah+OhxuQGIXPH2mxsv/qpPS39YJkpdgVLovEQs5RoFbvdz+5uT0bpYGzzqQWvbMha6Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSfAMsHxq21Nhrw+d3TO9/9Q4Bz7CI4r651u+tjVGkHAiBfcy3qJATLN9bATMdkvjx8sYx5BH+YGMmTWg93DDN/AA=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.1.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.1.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.1.0","dist":{"shasum":"e4d782e0d4086ceb71c24c50abcf56baef1ee71d","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.1.0.tgz","integrity":"sha512-/2GF5YLLjPWpn4xxULuIVKapKCX5QotpuzTnf/R42ROvLHirqTeOWl2xSL6/B9AX3zf81NrupR4qyaTkV+2dfg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqKYJmCyalYlcnHnMhFpNLtO/egYhe0DWuNC501pGI8AIgD8Hohu4oaN4GhCkgvIRwVZHOHd2F8ZL26z/ValcYtFs="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.2.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.2.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.2.0","dist":{"shasum":"15bb98148659aa030a9254180f645acc94e1bd42","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.2.0.tgz","integrity":"sha512-Lo84S62K1GIU/Hcq1MxDxpVHejmKbXlrPxfAXQ08bmQcWoXtqzv4dEnJT9+DHy5tqROcHKMXuvn6lpKOe6Rdag==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+5TCD36DT985Jw1he7G3COcisN7LsDlhke2WTBDrxSAiAG1ZMyszzR9Ch6wNpACTvKgZsqpRRWgpPyPvv0Wp1Kfg=="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.2.1":{"name":"reactive-component","description":"Reactive template engine","version":"0.2.1","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","debug":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.2.1","dist":{"shasum":"c202348e10782d332a83ce5a59b169864fcdab69","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.2.1.tgz","integrity":"sha512-PGXa1/Da67C0tMGqQJUfhsS7Xr5u1k1ImiSGggB+/afo9jT4ePR/vpbtQsqPKBqcXBFSsIgkXIUDftDMG9WgqQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr7p0hkrmwGtQrT+U6E2JwOs5/zBJW+Yalc25wf95CPgIhAIBl3nJRpDLFnkvB+KjRmoQR22Lml2lI4sC7/veTn5Ep"}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.2.2":{"name":"reactive-component","description":"Reactive template engine","version":"0.2.2","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","debug":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.2.2","dist":{"shasum":"be229e6c5fff818cb273388d42970fba60574b0e","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.2.2.tgz","integrity":"sha512-FWkyFqxBEaA7Ts1yKFU19bSkDfJxUYWRdRVLRGn2+uoqvwTpuNNAkDcKtCth+lLgDBEHTrAYrUTnX/wClcvQAg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPvrfQZosBHABMdqkDiTW1q8PnHpMVJDhiyo2VnrBrrgIgJo/EqfFFIiZkkv2ZseXoet0j6UheJGjJwYzrAz2Fc/I="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.3.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.3.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.3.0","dist":{"shasum":"8d77bfefad70ce799ea982766aa8dd93b01fdfca","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.3.0.tgz","integrity":"sha512-LP8phQMa62oesnlCFZ+Y25Seg48BNFbbbJuWH3JbefM7jc2ZsvcC/BTG7pndiN0BbSRY0cTjz6Hw9RAbX0AKXQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYKS6BtxoHjveLv3wcZoUjrIk2Lw0mtUAU2t115zOa2AIgSBzakcHiZ0x7J33tl6MJAwXi5IyylY+JLL2rFLv8MDo="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.4.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.4.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.4.0","dist":{"shasum":"1d9483686e562c0e996626dd563b252f09ef0f7a","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.4.0.tgz","integrity":"sha512-4Qym36/X4ctkb694a0KAhFNJwzsfaV0RajwtRHV/N9tiDiSB0uHIZVIcf1t0NyH+ZAi/5DsD6vhNnKJrtJYf9Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyIbvnfjECoCG95nyU/izv5hafhdCa+yGBrujNT8oQVgIgSFpTVUnsaC2o5094Hsfl+zyOnvbBYCBaVI0siLnoDTw="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.5.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.5.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive":"index.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.5.0","dist":{"shasum":"45005fa77cc030e185e9c490ab77c51020a0f551","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.5.0.tgz","integrity":"sha512-1QDsDdv/+nyGB2lCnkgnKy/xl0O54hbf4PClvTvceun83OKZkqjzVR9uWIqbZUcOffDesxlZ9Pnxng+fEDoX7g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg1sB8cFDsp7Vin61dwGRxlv/zI+KFpXDELb9sLE1APgIgKBwADNJ18Ft2eG1ZnI43zq9DWlFp1iUhvZyRIYcmB3Q="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.6.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.6.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n  Typically the callbacks would be a reference to the view itself, for example:\n\n```js\nfunction ItemView(item) {\n  this.item = item;\n  this.el = tmpl.cloneNode(true);\n  reactive(this.el, item, this);\n}\n\nItemView.prototype = {\n  filename: function(link, url){\n    link.href = url;\n    link.textContent = 'Download';\n  },\n  \n  hasDownloads: function(){\n    return !! this.item.filename;\n  }\n};\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.6.0","dist":{"shasum":"7fea431d9aa19b92b600d803111bdf5c3252dd41","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.6.0.tgz","integrity":"sha512-oTbNpEVyRqPXSjMYXBX2EIBaAiBBr4U/cBlyrXXlujLZ4Jla5p+dfZ/JNMoMMAFdJ+G2VqKS0oK8wALgG/Mo9A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWYr4qZ725FPwRugJY3hRGjESLvm9w7rOQfefF2p+zyAIgWCdkGVjZEKKO/aex8bdC3ty+7xY8yK/F2/NbYI62p+E="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.6.1":{"name":"reactive-component","description":"Reactive template engine","version":"0.6.1","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.6.1","dist":{"shasum":"4727ecbdd0ee3f79d787132cdb71d1d7116eddd8","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.6.1.tgz","integrity":"sha512-aOo2t3LGfVBkV80FkQAfeyA7SexQitmjO900BlW9wHxW5aHZ5rZhHLPPs2/z1lkR4qYPhdH9WbExGvSbii1TEQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQlb1sIbi9T0VuMQ2kpDAufE9VyJO69zSjSM+SLEsBqAiEAkVt3bz2sUlPNZEn+osZyTGHRVA0l7IBUpxp806esbFU="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.7.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.7.0","keywords":["reactive","template","engine"],"dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.7.0","dist":{"shasum":"5e5ef4c68fd0b5457fb47a0a19d3e5c3544ff036","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.7.0.tgz","integrity":"sha512-yBN/qjbPRhaGgNmdNwd3trVduPEFpfcmbQzSU9Qk/4OeuSPFtn5VDIDrgL8m/cT+lPj5cUFlBCDCF/9tXJZUQA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq+DOz9A7QZTVBnTYd1/BpdpGkAR1y4Yashjz9SgSgrQIgWNE8+QzEEngAPFLnnZvSHYhaf9GLvZedMtJFXuM38wg="}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.7.1":{"name":"reactive-component","description":"Reactive template engine","version":"0.7.1","keywords":["reactive","template","engine"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.7.1","dist":{"shasum":"480061b0e6267fcb5d00d9ffbc8f996079518137","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.7.1.tgz","integrity":"sha512-/Uh3dSk0fOVgTTyG46Fm4tamxcvZS8Wb0aW+zuYNI+zPzTV+GPK++EPZUXjHwUSDdMVEqc6rtP7YEVTzPhLB8A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZr9Kwb9+/WfZfizNJMtw6AZX+oWeu4vbKWYQWh/nbDwIhAJUOOyQ07hdR/5cxt0h9tafJNjrmmKRDjTkbh5UvwO65"}]},"_npmVersion":"1.1.66","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.8.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.8.0","keywords":["reactive","template","engine"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.8.0","dist":{"shasum":"42a32ef31071ea9227c190ed628a81dd839520fe","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.8.0.tgz","integrity":"sha512-pXfdLrNrtvpabkUkhZkh/pqkAxInGW3W4qQrXpnWkufiXYzrDfkH8/M6fKJo9WHzWeL7IzEAsXP46i5uOjZm4g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxjyM/qcubfNlXNL8xQ3l03nt4EgPY34Srz83FzdIBnAIgQyeyuhmNpxHbIU1TwIrwKioJF5+letRTtiK/ZrgcBEU="}]},"_npmVersion":"1.2.0","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.9.0":{"name":"reactive-component","description":"Reactive template engine","version":"0.9.0","keywords":["reactive","template","engine"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.9.0","dist":{"shasum":"e80baf6e72c76a5ebe31308fb57215c249e94440","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.9.0.tgz","integrity":"sha512-gdYGAdGKWDTaUpNWyijcGx21stakTmdsdR5SsYD/6kgd9rlW6S9uTiozgjOwVVqcenadiBNxMEZDz8HncOBQ5w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+HqdlSFbHG+H0yEmgxYBolRGsePCuATNEz6fPg/y0MAIgZEDSM5n6nr0/qjGXDgemaFgrNEHWTV1rioRTqmzTRQA="}]},"_npmVersion":"1.2.0","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.10.0":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.10.0","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.10.0","dist":{"shasum":"bae4092b020613efd917be1a9329e265133c5d72","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.10.0.tgz","integrity":"sha512-W4/G8Qe20rUbLDLhmEpSldcfXRcFg0sJhcWXhEEf4Tiqp9HWnD+v5QXLTro4gKZyLhUmYsI6SiYZRdi0UmmKRg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxV89IDAP0be+tZjtU58tEoFNmamnw8i9kQ8BAHyg67AiAiMEK6fZLpmNXFq+2wDGMY5s4Ldr77PMVMWNTAATKb0Q=="}]},"_from":".","_npmVersion":"1.2.2","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.10.1":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.10.1","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.10.1","dist":{"shasum":"0f12e3d85c7cfc8d6101954182ff67be009783cf","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.10.1.tgz","integrity":"sha512-m/Vy6LL6oRpFm+L+lMrPtDvpL7yR+25/js409SghZX3D1+3bC6eeXJAsTf3X9Pu4tkI1rsYVu6stg9OVAkZWLA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaOOuP+NnS9ZyS4SW27wMcDwNpMx1zjKu5NgFtKyEB8AiEA0vWWVXFUUYlFZL35x0znhtR0oyS2QTj+i98nZWNZaoo="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"directories":{}},"0.11.0":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.11.0","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","query-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  COME BACK LATER or look at ./examples\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.11.0","dist":{"shasum":"efd3e0a6457d3f3ed4d6b9eb06b909b663488ec5","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.11.0.tgz","integrity":"sha512-Xzsvzutt6L5K4yD3EztINaoFVrP4dkKw2k/jcCi1h04sq5sFjdgmBBSGbButiFOnCL+3hn4A0WJd3M1rWjaVFQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQClEalb2faOd8vFLZx9FXMAstpEbXtlJ2MxCrmQvrsHDgIfJmf5/D0j/IOf8w3pMaxTVILsCKdA4tiETXfto80APA=="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.12.0":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.12.0","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"*","event-component":"*","query-component":"*","format-parser":"*","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"\n# reactive\n\n  Reactive template engine similar to [Rivets](http://rivetsjs.com/) minus the coffee script,\n  and Caustic which no longer exists.\n\n## Installation\n\n    $ component install component/reactive\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed, updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n## Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-<attr>\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-<event>\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n ## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.12.0","dist":{"shasum":"2e631df6efb56839afad76047d42371ac593009b","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.12.0.tgz","integrity":"sha512-YW70vNcXcWVSSNr15A/3w7u21S1QVIrg488Z8wtFoEJFI2TMQlFDmahRbvP5rEbQw5kyQCatHVwha+NCAlHHGg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBj+CyxuVpbh1wQ1oijKtywhZgp7U/Sikj79pSZfLdm7AiAUH4VuAhxwpu07m/SkdVC/hG+ch2uQl2I4kYWozlTy4g=="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.12.1":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.12.1","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.1","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n    $ component install component/reactive\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed, updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an articles's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { @first + ' ' + @last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-<attr>\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-<event>\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.12.1","dist":{"shasum":"4156c3778e42a3ad2c571d1aa8b543a4a9f2c76b","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.12.1.tgz","integrity":"sha512-u2xfbZG50OdJiZl6RGQjI+MLdn614VcquXlkc1F1XpzXWDrCzICngB548FBjtcJ6rT9A3EWNq0fB8JsofpJTBA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIieCvGAroqJ9+TTd84YL92yq/F0X3CifpEopj1s+TZgIgWCl/yvfK+7JxwNUQwRODeax/xEIhLiAoWbUDE1B+y9g="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.12.2":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.12.2","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.1","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/utils.js":"lib/utils.js","reactive/attr-binding.js":"lib/attr-binding.js","reactive/text-binding.js":"lib/text-binding.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n    $ component install component/reactive\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed, updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an articles's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { @first + ' ' + @last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-<attr>\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-<event>\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.12.2","dist":{"shasum":"e34459021a8649db3adad788a7ff5792dcd77033","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.12.2.tgz","integrity":"sha512-Rl9W8FZWHlDk9h65YjAn6anLDCzm8JcyrZc0qB+z2n0XL/BaPxtwWYpzVHl/yWgS13mCpY7hPk7jQ1MtdiDL8g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwadeeuHp3uwK6Zw5XEMEPSWr+9/1ap0fg1JLAqJpeZAiAoQVI2FCEP6opcTsQjoG8catXNTJHem+sjo3tskkIxZg=="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.12.3":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.12.3","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.1","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","escape-html":"1.0.0","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/utils.js":"lib/utils.js","reactive/attr-binding.js":"lib/attr-binding.js","reactive/text-binding.js":"lib/text-binding.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n    $ component install component/reactive\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed, updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an articles's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { @first + ' ' + @last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-<attr>\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-<event>\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.12.3","dist":{"shasum":"10e8f972810ecb14ff4935b66f7d084d02897c5d","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.12.3.tgz","integrity":"sha512-dmWTy/1BYiUMOwn9kjF1UCdXX0JgkPAqYS6vtVB7NpvGN4Dab5oj24/V6GkVp+RzN+6SN/J7wfIHSPLfIrjtfQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEG5bToUov3CB5ejRnyl3gPcOx3U9V61F7X4YkFgnOGqAiEA/tLxNISD6zmsqpGPN72qULQLBuqiL7SMJAs8qBcSEVI="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.13.0":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.13.0","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.1","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/utils.js":"lib/utils.js","reactive/attr-binding.js":"lib/attr-binding.js","reactive/text-binding.js":"lib/text-binding.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js","reactive/adapter.js":"lib/adapter.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n With component:\n\n    $ component install component/reactive\n\n With the stand-alone browser build:\n\n    <script src=\"reactive.js\"></script>\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Adapters\n\n### Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n### Getting and Setting\n\nYou can make reactive compatible with your favorite framework by defining how reactive gets and sets the model.\n\nBy default reactive supports `obj[prop] = val` and `obj[prop](val)`, but these can be changed with `reactive.get(fn)` and `reactive.set(fn)`. Here's how to make reactive compatible with backbone:\n\n```js\nreactive.get(function(obj, prop) {\n  return obj.get(prop);\n});\n\nreactive.set(function(obj, prop, val) {\n  obj.set(prop, val);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an article's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { first + ' ' + last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-<attr>\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-<event>\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.13.0","dist":{"shasum":"2e06f2c8b6e5363229777414a673bd18fa530034","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.13.0.tgz","integrity":"sha512-bjFuVGLZwE8m4H2BhdOs7nqzKzelnbnaBXgd+ESkY3VqKjip0OooaAm8bFkiFYIPOr0Sgc5ngOH9sh2oQQSk1Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUcEoqgRc+/vB9OaeFhxCInV4Vc4YOW60ORtzneKnNUAiA8lgDM6EKhlH8LeZt5n2xH7XcRGXxwuzA1NhMGOuPyRw=="}]},"_from":".","_npmVersion":"1.2.14","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.13.1":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.13.1","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.1","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","debug":"*"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/utils.js":"lib/utils.js","reactive/attr-binding.js":"lib/attr-binding.js","reactive/text-binding.js":"lib/text-binding.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js","reactive/adapter.js":"lib/adapter.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n With component:\n\n    $ component install component/reactive\n\n With the stand-alone browser build:\n\n    <script src=\"reactive.js\"></script>\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Adapters\n\n### Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n### Getting and Setting\n\nYou can make reactive compatible with your favorite framework by defining how reactive gets and sets the model.\n\nBy default reactive supports `obj[prop] = val` and `obj[prop](val)`, but these can be changed with `reactive.get(fn)` and `reactive.set(fn)`. Here's how to make reactive compatible with backbone:\n\n```js\nreactive.get(function(obj, prop) {\n  return obj.get(prop);\n});\n\nreactive.set(function(obj, prop, val) {\n  obj.set(prop, val);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an article's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { first + ' ' + last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-&lt;attr&gt;\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-&lt;event&gt;\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.13.1","dist":{"shasum":"4da6377def050fe87ccfe9fead3b557d7319deca","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.13.1.tgz","integrity":"sha512-4O4PrZFfb+c8v/dR1gFLC06nnA9JbXl9HyNX155u/c6m+mynzwATdZ/w5kTfxPXytibI54ui7WJJjAFLxbJfSg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzuskEIjghK3fk9Eyc4OiMNUsK/JA+zeR9jJZX9fhK8AIgWg/kMLoceU+4/Obw6wGH38/GJ7UgD3YVPFZ8TMTAB6o="}]},"_from":".","_npmVersion":"1.2.30","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]},"0.13.2":{"name":"reactive-component","description":"Reactive template engine with data bindings","version":"0.13.2","keywords":["reactive","template","engine","data","bind","bindings"],"main":"lib/index.js","dependencies":{"classes-component":"1.1.3","event-component":"0.1.0","query-component":"*","props-component":"1.0.3","format-parser":"0.0.2","debug":"*"},"browser":{"classes":"classes-component","event":"event-component","query":"query-component","props":"props-component"},"devDependencies":{"better-assert":"*","mocha":"*"},"component":{"scripts":{"reactive/index.js":"lib/index.js","reactive/utils.js":"lib/utils.js","reactive/attr-binding.js":"lib/attr-binding.js","reactive/text-binding.js":"lib/text-binding.js","reactive/bindings.js":"lib/bindings.js","reactive/binding.js":"lib/binding.js","reactive/adapter.js":"lib/adapter.js"}},"readme":"# reactive\n\n  Reactive template engine for robust real-time rendering of model data changes.\n\n## Installation\n\n With component:\n\n    $ component install component/reactive\n\n With the stand-alone browser build:\n\n    <script src=\"reactive.js\"></script>\n\n## API\n\n### reactive(element, object, [view])\n\n  Bind `object` to the given `element` with optional `view` object. When a `view` object is present it will be checked first for overrides, which otherwise delegate to the model `object`.\n\nFor example if you have the following HTML:\n\n```html\n<h1 data-text=\"name\"></h1>\n```\n\nAnd pass the following `object` as the _second_ argument:\n\n```js\n{\n  name: 'Tobi'\n}\n```\n\nThe output will become:\n\n```html\n<h1>Tobi</h1>\n```\n\nHowever if you wish to manipulate the output or provided computed properties thae `view` object may be passed. For example an `object` of:\n\n```js\n{\n  first_name: \"Tobi\",\n  last_name: \"Ferret\"\n}\n```\n\nAnd a `view` of:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n}\n\nUserView.prototype.name = function(){\n  return this.user.first_name + ' ' + this.user.last_name;\n}\n```\n\nWould produce:\n\n```html\n<h1>Tobi Ferret</h1>\n```\n\nTypically a view object wraps a model to provide additional functionality, this may look something like the following:\n\n```js\nfunction UserView(user) {\n  this.user = user;\n  this.el = reactive(tmpl, user, this);\n}\n\nUserView.prototype.name = function(){ ... }\n```\n\nOften a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.\n\n## Adapters\n\n### Subscriptions\n\n Subscriptions allow reactive to know when an object's data has changed updating the DOM appropriately _without_ re-rendering a static template. This means if you make manual DOM adjustments, append canvases etc they will remain intact.\n\n  By default reactive subscribes using `.on(\"change <name>\", callback)` however it's easy to define your own subscription methods:\n\n```js\nreactive.subscribe(function(obj, prop, fn){\n  obj.bind(prop, fn);\n});\n\nreactive.unsubscribe(function(obj, prop, fn){\n  obj.unbind(prop, fn);\n});\n```\n\n### Getting and Setting\n\nYou can make reactive compatible with your favorite framework by defining how reactive gets and sets the model.\n\nBy default reactive supports `obj[prop] = val` and `obj[prop](val)`, but these can be changed with `reactive.get(fn)` and `reactive.set(fn)`. Here's how to make reactive compatible with backbone:\n\n```js\nreactive.get(function(obj, prop) {\n  return obj.get(prop);\n});\n\nreactive.set(function(obj, prop, val) {\n  obj.set(prop, val);\n});\n```\n\n## Interpolation\n\n  Bindings may be applied via interoplation on attributes or text. For example here\n  is a simple use of this feature to react to changes of an article's `.name` property:\n\n```html\n<article>\n  <h2>{name}</h2>\n</article>\n```\n\n  Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions\n  for defaulting values or other operations.\n\n```html\n<article>\n  <h2>{ name || 'Untitled' }</h2>\n  <p>Summary: { body.slice(0, 10) }</p>\n</article>\n```\n\n Reactive is smart enough to pick out multiple properties that may be used, and\n react to any of their changes:\n\n```html\n<p>Welcome { first + ' ' + last }.</p>\n```\n\n Interpolation works for attributes as well, reacting to changes as you'd expect:\n\n```html\n<li class=\"file-{id}\">\n  <h3>{filename}</h3>\n  <p><a href=\"/files/{id}/download\">Download {filename}</a></p>\n<li>\n```\n\n## Declarative Bindings\n\n  By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with \"data-*\" however this is not required.\n\n### data-text\n\nThe `data-text` binding sets the text content of an element.\n\n### data-html\n\nThe `data-html` binding sets the inner html of an element.\n\n### data-&lt;attr&gt;\n\nThe `data-<attr>` bindings allows you to set an attribute:\n\n```html\n<a data-href=\"download_url\">Download</a>\n```\n\n### on-&lt;event&gt;\n\nThe `on-<event>` bindings allow you to listen on an event:\n\n```html\n<li data-text=\"title\"><a on-click=\"remove\">x</a></li>\n```\n\n### data-append\n\n  The `data-append` binding allows you to append an existing element:\n\n```html\n<div class=\"photo\" data-append=\"histogram\">\n\n</div>\n```\n\n### data-replace\n\n  The `data-replace` binding allows you to replace an existing element:\n\n```html\n<div class=\"photo\" data-replace=\"histogram\">\n\n</div>\n```\n\n### data-{show,hide}\n\n  The `data-show` and `data-hide` bindings conditionally add \"show\" or \"hide\" classnames so that you may style an element as hidden or visible.\n\n```html\n<p data-show=\"hasDescription\" data-text=\"truncatedDescription\"></p>\n```\n\n### data-checked\n\n Toggles checkbox state:\n\n```html\n<input type=\"checkbox\" data-checked=\"agreed_to_terms\">\n```\n\n### Writing bindings\n\nTo author bindings simply call the `reactive.bind(name, fn)` method, passing the binding name and a callback which is invoked with the element itself and the value. For example here is a binding which removes an element when truthy:\n\n```js\nreactive.bind('remove-if', function(el, name){\n  el = $(el);\n  var parent = el.parent();\n  this.change(function(){\n    if (this.value(name)) {\n      el.remove();\n    }\n  });\n});\n```\n\n## Computed properties\n\nReactive supports computed properties denoted with the `<` character. Here the `fullname` property does not exist on the model, it is a combination of both `.first` and `.last`, however you must tell Reactive about the real properties in order for it to react appropriately:\n\n```html\n<h1 data-text=\"fullname < first last\"></h1>\n```\n\n__NOTE__: in the future Reactive may support hinting of computed properties from _outside_ Reactive itself, as your ORM-ish library may already have this information.\n\n## Interpolation\n\n Some bindings such as `data-text` and `data-<attr>` support interpolation. These properties are automatically added to the subscription, and react to changes:\n\n\n ```html\n <a data-href=\"/download/{id}\" data-text=\"Download {filename}\"></a>\n ```\n\n## Notes\n\n  Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive \"auto-submit\" form binding:\n\n```html\n<div class=\"login\">\n  <form action=\"/user\" method=\"post\" autosubmit>\n    <input type=\"text\" name=\"name\" placeholder=\"Username\" />\n    <input type=\"password\" name=\"pass\" placeholder=\"Password\" />\n    <input type=\"submit\" value=\"Login\" />\n  </form>\n</div>\n```\n\n```js\nvar reactive = require('reactive');\n\n// bind\n\nvar view = reactive(document.querySelector('.login'));\n\n// custom binding available to this view only\n\nview.bind('autosubmit', function(el){\n  el.onsubmit = function(e){\n    e.preventDefault();\n    var path = el.getAttribute('action');\n    var method = el.getAttribute('method').toUpperCase();\n    console.log('submit to %s %s', method, path);\n  }\n});\n```\n\nFor more examples view the ./examples directory.\n\n## License\n\n  MIT\n","readmeFilename":"Readme.md","_id":"reactive-component@0.13.2","dist":{"shasum":"2049d0cdad02a8c1610e38359f19e78e16f21e2d","tarball":"https://registry.npmjs.org/reactive-component/-/reactive-component-0.13.2.tgz","integrity":"sha512-2sSjD4xgMfNxsI78uf34wTcwx9whP8Uvx6TQZaxU2Z/1n1iBeT51bIGQ4fT4ihif2Krg4vQiP4oohNdUQUbVYw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnhlcDTynW/hUdEJfHtZNkcQInLtG03G0DF/QMY108IAiEAp9QGvz226BpWNUAaThT2vTz63lDavW9BkFw4omo+egM="}]},"_from":".","_npmVersion":"1.2.30","_npmUser":{"name":"tjholowaychuk","email":"tj@vision-media.ca"},"maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}]}},"readme":"\n# reactive\n\n  Reactive template engine\n\n## Installation\n\n    $ component install component/reactive\n\n## Example\n\n  Simply invoke `reactive()` on the element to wish to\n  become the \"template\" for `obj`. The given `obj` _must_\n  emit `\"change\"` events passing `(prop, val)`, the template\n  will react to these changes.\n\n```js\nvar reactive = require('reactive');\nreactive(el, obj);\n```\n\n  You may also map custom callbacks for formatting or messing with an element\n  based on a change. The element, value, and object itself are passed as arguments.\n\n```js\nvar reactive = require('reactive');\nreactive(el, user, {\n  birthdate: function(el, date, user){\n    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();\n  }\n});\n```\n\n## Todo\n\n  - composition of smaller templates instead of conditionals etc..\n  - defer `.render()` and use `.change('birthdate', fn)` instead of object-literal\n  - moar docs / examples\n\n## License\n\n  MIT\n","maintainers":[{"name":"tjholowaychuk","email":"tj@vision-media.ca"}],"time":{"modified":"2022-06-26T09:06:05.306Z","created":"2012-11-15T18:29:11.518Z","0.0.1":"2012-11-15T18:29:12.576Z","0.1.0":"2012-12-12T18:48:19.213Z","0.2.0":"2012-12-12T22:16:29.628Z","0.2.1":"2012-12-12T22:29:34.767Z","0.2.2":"2012-12-12T22:46:21.618Z","0.3.0":"2012-12-13T00:04:28.303Z","0.4.0":"2012-12-13T16:54:15.313Z","0.5.0":"2012-12-18T18:15:21.388Z","0.6.0":"2012-12-19T00:53:47.063Z","0.6.1":"2012-12-19T18:31:38.633Z","0.7.0":"2012-12-19T20:15:30.876Z","0.7.1":"2012-12-29T00:29:50.690Z","0.8.0":"2013-01-16T17:07:43.326Z","0.9.0":"2013-01-18T04:50:28.226Z","0.10.0":"2013-02-25T22:21:58.907Z","0.10.1":"2013-04-11T22:48:29.136Z","0.11.0":"2013-04-15T22:14:09.867Z","0.12.0":"2013-05-12T02:46:09.269Z","0.12.1":"2013-05-27T17:24:45.772Z","0.12.2":"2013-05-27T17:30:07.267Z","0.12.3":"2013-05-30T16:33:07.050Z","0.13.0":"2013-07-01T16:14:44.133Z","0.13.1":"2013-08-01T01:54:26.102Z","0.13.2":"2013-08-21T21:14:38.217Z"}}