{"id":15893386,"url":"https://github.com/multimeric/jstreebind","last_synced_at":"2025-07-26T20:33:31.185Z","repository":{"id":26406024,"uuid":"29855989","full_name":"multimeric/jsTreeBind","owner":"multimeric","description":"A jQuery plugin that allows the use of data binding frameworks (Angular, Ember, Knockout etc.) with the jsTree UI component","archived":false,"fork":false,"pushed_at":"2016-01-29T13:27:26.000Z","size":137,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T16:40:31.671Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/multimeric.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-01-26T10:22:31.000Z","updated_at":"2017-05-24T21:14:41.000Z","dependencies_parsed_at":"2022-09-19T20:11:20.975Z","dependency_job_id":null,"html_url":"https://github.com/multimeric/jsTreeBind","commit_stats":null,"previous_names":["tmiguelt/jstree-bind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2FjsTreeBind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2FjsTreeBind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2FjsTreeBind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2FjsTreeBind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multimeric","download_url":"https://codeload.github.com/multimeric/jsTreeBind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246863816,"owners_count":20846317,"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-10-06T08:10:20.871Z","updated_at":"2025-04-02T17:42:53.614Z","avatar_url":"https://github.com/multimeric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsTree Bind\nA jQuery plugin that allows the use of data binding frameworks (Angular, Ember, Knockout etc.) with the jsTree UI component.\n\n## Rationale\n\njsTree is a fantastic plugin, but it's a bit behind the times. Unlike when it was first designed, web apps are now based on data binding rather than raw DOM manipulation. However using jsTree with a databinding framework has two main problems:\n\n* jsTree is designed for static data; data that never changes once it's been set.\n* You have to mangle your data into [jsTree's specific JSON format](http://www.jstree.com/docs/json/) in order for it to be displayed\n\nMy solution to these problems is to use the native capability of every framework; to bind data to the DOM. jsTree Bind uses the DOM as a template from which to create nodes, allowing you to have data in any structure, structure it in any way, but still present it in a tree format using jsTree\n\n## Installation\n\nJust run `npm install js-tree-bind` or `git clone https://github.com/TMiguelT/jsTreeBind` to get a copy of the\nrepository, then copy either `jsTreeBind.js` or `jsTreeBind.min.js` somewhere into your project.\n\n## Usage\n\nTo use jsTree Bind, all you need to do is call `$(\"#js-tree\").jsTreeBind(\"#tree-template\");`\n\nThe first element (`#js-tree` in this case) is the element that will *receive* the new tree.\nIt's the element that will actually be shown.\n\nThe second element, `#tree-template`, is the DOM element to be used as the template for the tree.\n\nDirectly inside the `#tree-template` element should be one or more HTML elements, which will serve as the root nodes for\nthe tree. These elements, and any child nodes nested further in the tree are used to generate jsTree nodes using the\nfollowing rules:\n\n* Text directly inside a node will be merged into that the jsTree node's text\n\n* Nested elements will be used to generate child nodes\n\n* As in the [jsTree docs](http://www.jstree.com/docs/html/), the `data-jstree` attribute can be used on any element to\nto provide a json object to use as the node's data\n\n* Any other `data-*` attributes can be used on the HTML elements, which work as you'd expect (e.g. `data-icon` sets the\nnode's icon class or image URL, `data-disabled` disables the node etc.)\n\nRead on for an example!\n\n## Example\n\n```html\n\u003c!--Set the template element to be hidden so it doesn't show up in the DOM--\u003e\n\u003cdiv class=\"hidden\" id=\"tree-template\"\u003e\n\n    \u003c!--The root node that has the text 'People'--\u003e\n    \u003cdiv\u003e\n        People\n        \u003cdiv ng-repeat=\"person in people()\"\u003e\n\n            \u003c!--Using a text node to set the text property--\u003e\n            {{ person.name }}\n\n            \u003c!--Using a data-attribute to set the text property--\u003e\n            \u003cdiv data-text=\"Tags\"\u003e\n                \u003c!--Using a data-attribute to set the icon property--\u003e\n                \u003cdiv data-icon=\"glyphicon glyphicon-leaf\" ng-repeat=\"tag in person.tags track by $index\"\u003e{{tag}}\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv data-text=\"Friends\"\u003e\n\n                \u003c!--Using data-jstree to disable the node (the only way to set boolean properties afaik--\u003e\n                \u003cdiv data-jstree='{\"disabled\": true}' data-icon=\"glyphicon glyphicon-leaf\"\n                     ng-repeat=\"friend in person.friends\"\u003e{{friend.name}}\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv data-text=\"Age\"\u003e\n                \u003c!--Using a data-jstree attribute to set the icon--\u003e\n                \u003cdiv data-jstree='{\"icon\": \"glyphicon glyphicon-leaf\"}'\u003e{{person.age}}\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv data-text=\"Gender\"\u003e\n                \u003c!--Using data-attribute to disable the node--\u003e\n                \u003cdiv data-disabled=\"true\" data-icon=\"glyphicon glyphicon-leaf\"\u003e{{person.gender}}\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!--The element that will recieve the jsTree--\u003e\n\u003cdiv id=\"js-tree\"\u003e\u003c/div\u003e\n```\n\n![Example](http://i.imgur.com/iAgTHX9.png)\n\nFor more detail on this example, including the Angular $scope data, and sample usage for another framework (VueJS),\nhave a look in the /demo directory of the repository.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultimeric%2Fjstreebind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultimeric%2Fjstreebind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultimeric%2Fjstreebind/lists"}