{"id":21965515,"url":"https://github.com/softius/jbindings","last_synced_at":"2025-03-22T21:30:39.665Z","repository":{"id":10979716,"uuid":"13297859","full_name":"softius/jBindings","owner":"softius","description":"Follow changes on any JavaScript Object","archived":false,"fork":false,"pushed_at":"2014-05-28T05:39:22.000Z","size":169,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T01:25:46.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-03T12:35:06.000Z","updated_at":"2014-05-28T05:39:22.000Z","dependencies_parsed_at":"2022-09-10T12:40:56.217Z","dependency_job_id":null,"html_url":"https://github.com/softius/jBindings","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softius%2FjBindings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softius%2FjBindings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softius%2FjBindings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softius%2FjBindings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softius","download_url":"https://codeload.github.com/softius/jBindings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245022259,"owners_count":20548505,"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":[],"created_at":"2024-11-29T12:47:56.838Z","updated_at":"2025-03-22T21:30:39.615Z","avatar_url":"https://github.com/softius.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jBindings\n=========\n\njBindings allows you to follow changes to any JavaScript object. It monitors all object properties for any changes and runs a function (handler) when that occurs.\n\njBindings comes with a built-in jQuery integration.\n\nWhy using jBindings?\n-------------------\nThe functionality is similar with `Object.watch` but there are some important differences:\n\n  1. The object is passed to handler as a parameter, instead of just the property.\n  2. Is is possible to link two properties of diffenent objects with each other. That is to copy the value of the first property to second object's property.\n\nYou can refer to instructions for further information.\n\nInstructions\n------------\n\nLet's assume that we have the following model.\n\n``` JAVASCRIPT\nvar User = {\n  \"id\": \"1\",\n  \"username\": \"softius\",\n  \"email\": \"softius@example.com\",\n  \"fullname\": \"Iacovos Constantinou\"\n}\n```\n\nYou can follow changes on any property, using the function `follow`. For instance:\n\n``` JAVASCRIPT\n// Follow obj User\nUser.follow(function(item) {\n  console.log(\"A change occured to user \"+ item.id)\n})\n\n// Change user email\nUser.email = \"iacovos@example.com\"    // This will log \"A change made to user 1\"\n```\n\nIn a real app, you might want to update an HTML element like below:\n\n``` JAVASCRIPT\nUser.follow(function(item) {\n  $('h1.title').html(item.fullname)\n})\n```\nIt is also possible also to follow HTML Elements. This include changes in attributes values.\n\n``` JAVASCRIPT\n$('input#user-email').follow(function(item) {\n  User.email = $(item).val()\n});\n```\n\nIf jQuery is not available you can use vanilla JavaScript, even for HTML elements\n\n``` JAVASCRIPT\ndocument.getElementById('user-email').follow(function(item) {\n  User.email = item.value\n});\n```\n\nLast, you can link two objects, in order to copy the value of one's property to second object's property. Hence, we can rewrite the above as below:\n\n``` JAVASCRIPT\n$('input#user-email').follow('value', User, 'email')\n```\n\nExamples\n--------\nExamples including integration with [handlebarsjs.com](handlebars.js) can be found under `examples` directory. \n\nTodo\n----\n \n* Data bindings via HTML5 Custom Data Attributes\n* Data bindings for Model functions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftius%2Fjbindings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftius%2Fjbindings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftius%2Fjbindings/lists"}