{"id":22750241,"url":"https://github.com/webix-hub/webix-backbone","last_synced_at":"2025-04-14T12:53:17.636Z","repository":{"id":46530920,"uuid":"85984148","full_name":"webix-hub/webix-backbone","owner":"webix-hub","description":"Using Webix with Backbone","archived":false,"fork":false,"pushed_at":"2021-10-06T09:39:41.000Z","size":8,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-11T19:55:16.893Z","etag":null,"topics":["jquery","webix","webix-integration"],"latest_commit_sha":null,"homepage":"http://webix.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webix-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-23T18:28:53.000Z","updated_at":"2023-05-02T10:30:57.000Z","dependencies_parsed_at":"2022-08-28T17:41:41.830Z","dependency_job_id":null,"html_url":"https://github.com/webix-hub/webix-backbone","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/webix-hub%2Fwebix-backbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-backbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-backbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-backbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webix-hub","download_url":"https://codeload.github.com/webix-hub/webix-backbone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248885449,"owners_count":21177625,"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":["jquery","webix","webix-integration"],"created_at":"2024-12-11T04:13:17.280Z","updated_at":"2025-04-14T12:53:17.611Z","avatar_url":"https://github.com/webix-hub.png","language":"JavaScript","readme":"Backbone adapter for Webix UI\n==========================\n\n[![npm version](https://badge.fury.io/js/webix-backbone.svg)](https://badge.fury.io/js/webix-backbone)\n\nBefore Webix 4.3 this module was part of webix.js\n\nSee the detailed documentation on [integration of Webix with Backbone](http://docs.webix.com/desktop__backbone.html).\n\nHow it can be used\n-------------\n\nWebix and Backbone can be cross-integrated on multiple levels:\n\n- Webix components can load data from backbone collection, check [Backbone Collections](http://docs.webix.com/desktop__backbone_collections.html) for more details;\n- Webix components can be wrapped in a Backbone View, check [Backbone Views](http://docs.webix.com/desktop__backbone_views.html) for more details;\n- visibility of Webix Components can be controlled by Backbone router, check [Backbone Routers](http://docs.webix.com/desktop__backbone_routers.html) for more details.\n\nMaking Preparations\n------------------\n\nTo integrate Backbone framework into your webpage, your should include links to it into the document head. Be attentive to specify the right relative paths to the places where the files\nare stored on your machine. The important point - library need to be included BEFORE webix.js: \n\n~~~html\n\u003cscript type=\"text/javascript\" \n\tsrc=\"http://code.jquery.com/jquery-1.7.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"./common/underscore.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"./common/backbone.js\"\u003e\u003c/script\u003e\n\n\u003clink rel=\"stylesheet\" href=\"../../codebase/webix.css\" type=\"text/css\" \n\tmedia=\"screen\" charset=\"utf-8\"\u003e\n\u003cscript src=\"../../codebase/webix.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n~~~\n\n\nCreating Views\n-----------------\n\nIn an integrated app, pure Backbone views and Backbone-Webix views co-exist. \n\nBackbone views are created under Backbone standard pattern:\n\n~~~js\ncView = Backbone.View.extend({\n\ttagName: \"h2\",\n\trender: function(){\n\t\t$(this.el).html(\"Child View\");\n\t},\n});\nvar v2 = new cView();\nv2.render();\n~~~\n\nBackbone-Webix integrated views resemble this pattern yet feature a **config** property where Webix configuration is stored. To instantiate such a view, a special **WebixView()** constructor is used:\n\n~~~js\nvar ui_config ={\n\ttype:\"wide\", rows:[\n\t\t{ template:\"top\", height:35 },\n\t\t{ type:\"wide\", cols:[ ..cols ..]},\n\t\t{ template:\"bottom\", height:35 }\n\t]\n};\n\nvar view  = new WebixView({\n\tel: \".app1_here\", // will be rendered to div with \"app1_here\" class\n\tconfig:ui_config\n}).render();\n~~~\n\n**Related sample:** [View](https://webix-hub.github.io/webix-backbone/samples/01_view.html)\n\nIn the code above Webix layout with 3 rows and columns in the second row is created. It is rendered to a div block with *\"app1_here\"* class. As a rule, views should be **manually rendered** \nwith a dedicated function. \n\n\nCreating Models and Collections\n------------------------\n\n~~~js\nFilmRecord = Backbone.Model.extend({});\nFilmList = Backbone.Collection.extend({\n\tmodel: FilmRecord,\n\turl:\"./common/data.json\" //adding data to collection\n});\n~~~\n\nLoading the Collection into a View\n-------------------------\n\nFirst, lets create a Webix data component, for instance a List view:\n\n~~~js\n$(\".app1_here\").webix_list({\n\tid:\"mylist\", width:200,\n\ttemplate:\"#title#\", select:true\n});\n~~~\n\nNow, when we have a view and a model we can render the model into the list view with the syncing method:\n\n~~~js\n//get data\nvar films = new FilmList();\nfilms.fetch();\n\n//sync collection data with list \n$$(\"mylist\").sync(films);\n~~~\n\n**Related sample:** [Loading data from Collection](https://webix-hub.github.io/webix-backbone/samples/03_load_collection.html)\n\nThe code above renders List view and fills it with data from FilmList Collection that is comprised of FirmRecord Models.\n\nThe sync between data collection and the component can be as well removed by the opposite method: \n\n~~~js\n$$(\"mylist\").unsync(films);\n~~~\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-backbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebix-hub%2Fwebix-backbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-backbone/lists"}