{"id":32231374,"url":"https://github.com/abuisman/jquery-freud","last_synced_at":"2026-02-21T18:05:50.477Z","repository":{"id":36811323,"uuid":"41118191","full_name":"abuisman/jquery-freud","owner":"abuisman","description":"Add component-like behaviours to DOM elements, created with simple javascript classes.","archived":false,"fork":false,"pushed_at":"2017-06-01T11:42:57.000Z","size":145,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-23T06:30:11.530Z","etag":null,"topics":["behaviour","component","dom-element"],"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/abuisman.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":"2015-08-20T20:48:54.000Z","updated_at":"2018-03-24T10:13:18.000Z","dependencies_parsed_at":"2022-08-31T03:41:42.328Z","dependency_job_id":null,"html_url":"https://github.com/abuisman/jquery-freud","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/abuisman/jquery-freud","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuisman%2Fjquery-freud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuisman%2Fjquery-freud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuisman%2Fjquery-freud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuisman%2Fjquery-freud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abuisman","download_url":"https://codeload.github.com/abuisman/jquery-freud/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuisman%2Fjquery-freud/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29689644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T15:51:39.154Z","status":"ssl_error","status_checked_at":"2026-02-21T15:49:03.425Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["behaviour","component","dom-element"],"created_at":"2025-10-22T11:36:19.990Z","updated_at":"2026-02-21T18:05:50.471Z","avatar_url":"https://github.com/abuisman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-freud\n\nMaster: [![Build Status](https://travis-ci.org/abuisman/jquery-freud.svg?branch=master)](https://travis-ci.org/abuisman/jquery-freud)\n\nVersion 1.1.0: [![Build Status](https://travis-ci.org/abuisman/jquery-freud.svg?branch=v1.1.0)](https://travis-ci.org/abuisman/jquery-freud)\n\n![sigmund](https://cloud.githubusercontent.com/assets/27729/9395534/56b81cd0-478f-11e5-9543-7d0afaa5a855.jpg)\n\nAdd behaviours to DOM elements, somewhat like components. These are simple Javascript classes that can do whatever you want with the element. Much simpler than building a jQuery plugin and less messy than one big js file.\n\n![freudsignature](https://cloud.githubusercontent.com/assets/27729/9395535/56b9558c-478f-11e5-8994-788cbffadfe5.png)\n\n## What is a behaviour?\n\nA behaviour is a simple class with a constructor that gets passed the element they are applied to. That class can then do all sorts of magical and not so magical things with that element.\n\n## An example\n\n````\nclass IncreaseCount\n  constructor: (@element, options = {}) -\u003e\n    @count = @element.data('count') || 0\n    $button = $('\u003cbutton\u003eAdd one\u003c/button\u003e')\n    @element.append($button)\n    $button.on('click', @handleButtonClick)\n\n  buttonClick: =\u003e\n    @count = @count + 1;\n    @element.find('.count').text(@count)\n````\n\nFor brevity the above code is in Coffeescript, but you can use any class you want. Freud creates an instance like this: `new behaviour(element)`.\n\nYou can now tell Freud about the behaviour like so:\n\n`$.freud('register', IncreaseCount)`\n\nFreud now knows this behaviour as 'IncreaseCount'. If you want to use a different name you can do:\n\n`$.freud('register', 'OtherName', IncreaseCount)`\n\nOf course you can also directly declare the behaviour as you pass it to freud:\n\n````\n$.freud('register',\n  class OttoLoewi\n    constructor: (@element, options = {}) -\u003e\n      neurotransmit(@element)\n)\n````\n\n## Applying behaviours\n\n### Data attribute 'behaviours'\n\nBehaviours can be applied to an element by setting a `data` attribute called `behaviours` on them with the name of the behaviour(s) as the value:\n\n````\n -- HTML:\n  \u003cdiv class='greeting-card' data-behaviours='greetingCard'\u003e\u003c/div\u003e\n\n -- Javascript\n  $(function() {\n    $('[data-behaviours]').freud();\n  });\n````\n\n### Passing behaviours to freud()\n\nAlternatively you may pass data-attributes to freud by passing an array to freud when selecting elements:\n\n````\n-- HTML:\n  \u003cdiv class='greeting-card'\u003e\u003c/div\u003e\n\n-- Javascript\n  $(function(){\n    $('.greeting-card').freud(['greetingCard']);\n  })\n````\n\n### Hybrid\n\nYou can also use both methods at the same time:\n\n````\n-- HTML:\n  \u003cdiv class='greeting-card' data-behaviours='anotherBehaviour'\u003e\u003c/div\u003e\n\n-- Javascript\n  $(function(){\n    $('.greeting-card').freud(['greetingCard']);\n  })\n````\n\n### Other key\n\nYou can also use your own key in case you don't want to use `'behaviours'`:\n\n````\n -- HTML:\n  \u003cdiv class='greeting-card' data-custom-key='greetingCard'\u003e\u003c/div\u003e\n\n -- Javascript\n  $(function() {\n    $('[data-behaviours]').freud({ behaviourKey: 'custom-key'});\n  });\n````\n\n### More than one behaviour\n\nApply more than one behaviour to the same element by passing a JSON array as the behaviours value:\n\n````\n  \u003cdiv class='greeting-card' data-behaviours='[\"GreetingCard\", \"HelloWorld\"]'\u003e\u003c/div\u003e\n````\n\nYou can also apply many behaviours through passing behaviours through the freud function:\n\n````\n-- HTML:\n  \u003cdiv class='greeting-card'\u003e\u003c/div\u003e\n\n-- Javascript\n  $(function(){\n    $('.greeting-card').freud(['greetingCard', 'anotherBehaviour']);\n  })\n````\n\n### Example uses\n\nSome things that I have used behaviours for:\n\n- In a calculations app we have charts displaying the results of calculations. My behaviour sits on the chart's container and opens up the web socket connection to listen for changes to the chart. When there is a change I refresh the chart with `@element.load(@element.data('chartUrl'))`\n\n- In forms you sometimes have select boxes that manage the values of other select boxes. E.g. 'select country', 'select city'. When you select a country the list of cities changes to display the cities for that country, etc. Instead of binding directly to the first select box, you can manage the code more easily in a behaviour that you put on the whole form. If you use the same pattern more often for different forms you can even apply multiple behaviours:\n\n`\u003cform behaviours='[“CountrySelect”, ”GoogleMaps”]'\u003e`\n\n## Feedback\n\nIf you find any bugs or issues please create a ticket here (on github). If you have any questions feel free to e-mail me at the e-mail address contained in the `package.json` and `bower.json`.\n\n## Contributing\n\nWith regards to bugs and issues, or when you find a killer feature for Freud please consider contributing.\n\n### Grunt\n\nFreud is written in Coffeescript. You can edit the file in `src` and build it by running the command `grunt`. This will also start a simple static file server where you can play around with the plugin on a simple index.html.\n\nAlso make sure that all tests are passing by running `grunt test`.\n\n## License\n\n--------------\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 Achilleas L.D. Buisman\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the “Software”), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuisman%2Fjquery-freud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabuisman%2Fjquery-freud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuisman%2Fjquery-freud/lists"}