{"id":18575877,"url":"https://github.com/bevry-archive/pointers","last_synced_at":"2025-04-10T08:30:57.177Z","repository":{"id":12294503,"uuid":"14923190","full_name":"bevry-archive/pointers","owner":"bevry-archive","description":"Syncs a model or collection with an element. Supports two-way syncs. Respects garbage collection and bottom-up rendering. Reactive.","archived":false,"fork":false,"pushed_at":"2013-12-20T05:49:20.000Z","size":114,"stargazers_count":3,"open_issues_count":0,"forks_count":20,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T18:52:30.441Z","etag":null,"topics":["client-side","mvc","view"],"latest_commit_sha":null,"homepage":"http://jsfiddle.net/balupton/KBGw3/","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bevry-archive.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-04T12:28:14.000Z","updated_at":"2019-08-09T23:18:27.000Z","dependencies_parsed_at":"2022-08-21T04:10:43.210Z","dependency_job_id":null,"html_url":"https://github.com/bevry-archive/pointers","commit_stats":null,"previous_names":["bevry/pointers"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevry-archive%2Fpointers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevry-archive%2Fpointers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevry-archive%2Fpointers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevry-archive%2Fpointers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bevry-archive","download_url":"https://codeload.github.com/bevry-archive/pointers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248185280,"owners_count":21061488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side","mvc","view"],"created_at":"2024-11-06T23:22:38.757Z","updated_at":"2025-04-10T08:30:56.819Z","avatar_url":"https://github.com/bevry-archive.png","language":"CoffeeScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QB8GQPZAH84N6"],"categories":[],"sub_categories":[],"readme":"\u003c!-- TITLE/ --\u003e\n\n# Pointers\n\n\u003c!-- /TITLE --\u003e\n\n\n\u003c!-- BADGES/ --\u003e\n\n[![Build Status](http://img.shields.io/travis-ci/bevry/pointers.png?branch=master)](http://travis-ci.org/bevry/pointers \"Check this project's build status on TravisCI\")\n[![NPM version](http://badge.fury.io/js/pointers.png)](https://npmjs.org/package/pointers \"View this project on NPM\")\n[![Gittip donate button](http://img.shields.io/gittip/bevry.png)](https://www.gittip.com/bevry/ \"Donate weekly to this project using Gittip\")\n[![Flattr donate button](http://img.shields.io/flattr/donate.png?color=yellow)](http://flattr.com/thing/344188/balupton-on-Flattr \"Donate monthly to this project using Flattr\")\n[![PayPayl donate button](http://img.shields.io/paypal/donate.png?color=yellow)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QB8GQPZAH84N6 \"Donate once-off to this project using Paypal\")\n\n\u003c!-- /BADGES --\u003e\n\n\n\u003c!-- DESCRIPTION/ --\u003e\n\nSyncs a model/collection with an element. Supports two-way syncs. Respects garbage collection and bottom-up rendering. Reactive.\n\n\u003c!-- /DESCRIPTION --\u003e\n\n\n\u003c!-- INSTALL/ --\u003e\n\n## Install\n\n### [Node](http://nodejs.org/)\n- Use: `require('pointers')`\n- Install: `npm install --save pointers`\n\n### [Browserify](http://browserify.org/)\n- Use: `require('pointers')`\n- Install: `npm install --save pointers`\n- CDN URL: `//wzrd.in/bundle/pointers@1.1.3`\n\n### [Ender](http://ender.jit.su/)\n- Use: `require('pointers')`\n- Install: `ender add pointers`\n\n\u003c!-- /INSTALL --\u003e\n\n\n## Demo\n\n[View the interactive JSFiddle](http://jsfiddle.net/balupton/KBGw3/)\n\n\n## Usage\n\nElement Sync comes in handy when you want to keep an element up to date with a model or collection, or a model up to date with the value of an element, or both.\n\nThere are three ways you can keep sync a model or collection to an element:\n\n- You can keep an element's text or value up to date with the value of a model's attributes\n\t- Uses the `element` `item`, and `itemAttributes` configuration options\n- You can keep an element up to date with a view bound to the model\n\t- Uses the `element`, and `item` configuration options\n- You can keep an element up to date with views for each model in a collection\n\t- Uses the `element`, `item`, and `viewClass` configuration options\n\nAnd there is one way you can sync an element to a model or collection:\n\n- You can keep a model's attributes value up to date with an element's value or text\n\t- Uses the `element`, `item`, `itemAttributes`, and `itemSetter` configuration options\n\nThe only differences between these methods, are what configuration options are sent to the pointer. The available configuration options are:\n\n- `item` — the model or collection that we want to sync with the element, e.g. `new Backbone.Model()`\n- `itemAttributes` — when syncing a model's attributes to an element, this is an array of the attributes that we want to sync to the element's value, e.g. `['title', 'name', 'path']`\n- `viewClass` — when syncing a model or collection directly to an element, this is the view class that be instantiated for the model, or for each of the collection's models\n- `element` — the element to our collection, model, or specified model's attributes to\n- `elementSetter` — when syncing a model's attributes to an element, this is either `true` to use the default setter that will update the element's value or text, or can be a custom function that accepts an object of `$el` the element, `item` the item this pointer is for, `value` the model value that just changed\n-  `itemSetter` — when syncing an element's value to a model's attribute, this is either `false` to disable this ability (the default), `true` to use the default setter (just a plain set of the first specified itemAttribute using the element's latest value), or a function that accepts an object of `$el` the element, `item` the item this pointer is for, `value` the element value that just changed\n\nKnowing all this, you create a pointer like so:\n\n``` javascript\nvar Pointer = require('pointers').Pointer;\n\nnew Pointer({\n\titem: null,\n\titemAttributes: null,\n\tviewClass: null,\n\telement: null,\n\telementSetter: null,\n\titemSetter: null\n}).bind()\n```\n\n\n## Compatibility\n\n### Elements\n\nPointers are compatible out of the box with both jQuery and Zepto, and whatever else that implements the API:\n\n- `$el = $(domElement)`\n- `$el.data('property')`, `$el.data('property', value)`\n- `$el.addClass('className')`\n- `$el.appendTo($anotherEl)`\n- `$el.find('sizzle selector')`\n- `$el.children()`\n- `$el.each(function(){})`\n- `$el.is('sizzle selector')`\n- `$el.val('value')`\n- `$el.text('html that will be escaped to text')`\n- `$el.on('change', function(event){})`\n\n### Views\n\nPointers are compatible out of the box with MiniView, or whatever else that implements the API:\n\n- `new viewClass({item: item, model:item})` — the constructor of the view class should either accept the model via the `item` or `model` configuration options\n- `view.destroy()` — a method to remove the element from the DOM, and clean up the view from memory\n- `view.$el` — exposes the element that the view is for\n\nWhich can be easily accomplish with Backbone.js Views and SpineMVC Controllers.\n\n### Models\n\nPointers are compatible out of the box with Backbone Models, and whatever else that implements the API:\n\n- `model.get('name')` — get an attribute value\n- `model.set({name: \"Benjamin Lupton\"})` — updates the attributes on the model\n- `model.on('change:name', function(theSameModel, theNewValue, someOptions){})`\n- `model.off('event', listenerFunction)`\n\n### Collections\n\nPointers are compatible out of the box with Backbone Collections, and whatever else that implements the API:\n\n- `collections.models` — an array of model instances\n- `collection.on('add', function(addedModel, theSameCollection, someOptions){})`\n- `collection.on('remove', function(removedModel, theSameCollection, someOptions){})`\n- `collection.on('reset', function(theSameCollection, someOptions){})`\n- `model.off('event', listenerFunction)`\n\n\n\n\u003c!-- HISTORY/ --\u003e\n\n## History\n[Discover the change history by heading on over to the `HISTORY.md` file.](https://github.com/bevry/pointers/blob/master/HISTORY.md#files)\n\n\u003c!-- /HISTORY --\u003e\n\n\n\u003c!-- CONTRIBUTE/ --\u003e\n\n## Contribute\n\n[Discover how you can contribute by heading on over to the `CONTRIBUTING.md` file.](https://github.com/bevry/pointers/blob/master/CONTRIBUTING.md#files)\n\n\u003c!-- /CONTRIBUTE --\u003e\n\n\n\u003c!-- BACKERS/ --\u003e\n\n## Backers\n\n### Maintainers\n\nThese amazing people are maintaining this project:\n\n- Benjamin Lupton \u003cb@lupton.cc\u003e (https://github.com/balupton)\n\n### Sponsors\n\nNo sponsors yet! Will you be the first?\n\n[![Gittip donate button](http://img.shields.io/gittip/bevry.png)](https://www.gittip.com/bevry/ \"Donate weekly to this project using Gittip\")\n[![Flattr donate button](http://img.shields.io/flattr/donate.png?color=yellow)](http://flattr.com/thing/344188/balupton-on-Flattr \"Donate monthly to this project using Flattr\")\n[![PayPayl donate button](http://img.shields.io/paypal/donate.png?color=yellow)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QB8GQPZAH84N6 \"Donate once-off to this project using Paypal\")\n\n### Contributors\n\nThese amazing people have contributed code to this project:\n\n- [Benjamin Lupton](https://github.com/balupton) \u003cb@lupton.cc\u003e — [view contributions](https://github.com/bevry/pointers/commits?author=balupton)\n\n[Become a contributor!](https://github.com/bevry/pointers/blob/master/CONTRIBUTING.md#files)\n\n\u003c!-- /BACKERS --\u003e\n\n\n\u003c!-- LICENSE/ --\u003e\n\n## License\n\nLicensed under the incredibly [permissive](http://en.wikipedia.org/wiki/Permissive_free_software_licence) [MIT license](http://creativecommons.org/licenses/MIT/)\n\nCopyright \u0026copy; 2013+ Bevry Pty Ltd \u003cus@bevry.me\u003e (http://bevry.me)\n\n\u003c!-- /LICENSE --\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevry-archive%2Fpointers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbevry-archive%2Fpointers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevry-archive%2Fpointers/lists"}