{"id":16155067,"url":"https://github.com/jcbrand/backbone.vdomview","last_synced_at":"2025-07-26T12:39:33.334Z","repository":{"id":74699514,"uuid":"110285556","full_name":"jcbrand/backbone.vdomview","owner":"jcbrand","description":"VirtualDOM-aware Backbone View","archived":false,"fork":false,"pushed_at":"2021-11-17T11:15:31.000Z","size":59,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T12:04:21.780Z","etag":null,"topics":["backbone","backbonejs","vdom","virtual-dom"],"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/jcbrand.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-10T19:37:24.000Z","updated_at":"2024-02-13T10:50:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"40947c47-1c04-4b49-91c0-078a097f7755","html_url":"https://github.com/jcbrand/backbone.vdomview","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcbrand%2Fbackbone.vdomview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcbrand%2Fbackbone.vdomview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcbrand%2Fbackbone.vdomview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcbrand%2Fbackbone.vdomview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcbrand","download_url":"https://codeload.github.com/jcbrand/backbone.vdomview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243949730,"owners_count":20373650,"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":["backbone","backbonejs","vdom","virtual-dom"],"created_at":"2024-10-10T01:19:38.321Z","updated_at":"2025-03-18T20:30:19.185Z","avatar_url":"https://github.com/jcbrand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# backbone.vdomview\n\n## Note: Check out Skeletor instead\n\nIf you're looking for a way to write declarative views that only update the\nchanged parts of the DOM, take a look at [Skeletor](https://github.com/conversejs/skeletor),\nand in particular the `ElementView` class.\n\nIt does the same thing as the `VDOMView` in this package, but much better and\nquicker.\n\nSkeletor is a fork of Backbone that adds [various new\nfeatures](https://github.com/conversejs/skeletor#sekeletor-adds-the-following-changes-to-backbone),\nbut you can continue using Backbone and just start using the `ElementView`.\n\n---\n\nThis library provides a VirtualDOM-aware Backbone View, called\n`Backbone.VDOMView`.\n\nIt depends on [snabbdom](https://github.com/snabbdom/snabbdom) for the virtual-DOM implementation.\n\n## How to use\n\nTo use it, extend `Backbone.VDOMView`. Then, instead of implementing a `render`\nmethod in your view, add a `toHTML` method which returns the View's HTML as a\nstring (or alternatively, add a `toDOM` method which returns a single DOM element).\n\nThe HTML of the `toHTML` must be structured so that there's a root element\ncontaining everything else. This root element is the view's top-level element,\nin other words, it's the DOM node represented by the `this.el` or `this.$el`\nattribute of the View.\n\nReact has a similar requirement that JSX returned by a component's `render` method\nshould have a root node which contains everything else.\n\nThe rest will then be handled by `VDOMView`, which will automatically\ngenerate a diff between the view's current DOM element and new virtual-DOM\nnode and then patch the actual DOM with this diff.\n\nFor example:\n\n    const MyView = Backbone.VDOMView.extend({\n\n        tagName: 'span',\n        className: 'vdom-span',\n\n        toHTML () {\n            return this.template(_.assign(this.model.toJSON()));\n        }\n    });\n\n### The toHTML method\n\nOne important difference between `Backbone.VDOMView` and `Backbone.View`\nthat should be noted is that the HTML being rendered (in the case of\n`Backbone.VDOMView` this is done in the `toHTML` method) should include\nthe root element of the view.\n\nSo in the example above `toHTML` should return `\u003cspan class=\"vdom-span\"\u003e ... \u003c/span\u003e`\nas the outer part of the HTML string.\n\nThis is different from normal Backbone.View classes, where your template will\nonly return the *inner* part of the view element.\n\n### Event registration on virtual nodes\n\n[Snabbdom](https://github.com/snabbdom/snabbdom) implements non-core\nfunctionality in separate modules.\n\nBackbone.VDOMView makes use of all Snabbdom's modules except for the\n`eventlisteners` module.\n\nThe `eventlisteners` module allows you to add event listeners\nwhen creating a virtual node via the `h` method.\n\nHowever Backbone.VDOMView doesn't use the `h` method of Snabbdom at all (it\ndoesn't even include the code for it). Instead, it expects you to render the\nHTML for the view in the `toHTML` method, for example by using an underscore or\nlodash template.\n\nThere's therefore no way to attach these event listeners.\n\nThis way of registering event listeners is also in contrast to [Backbone's\ndeclarative way of registering events](http://backbonejs.org/#View-events),\nwhich is more the \"Backbone way\".\n\nBackbone.VDOMView will make sure that these declaratively registered event\nlisteners will remain active whenever the View's DOM representation changes.\n\n### The beforeRender and afterRender lifecycle methods\n\n`Backbone.VDOMView` will call two lifecycle methods (if they exist).\nThese are `beforeRender` and `afterRender` and are respectively called\nbefore and after `toHTML` is called.\n\n### Using Backbone.VDOMView without jQuery\n\nBackbone can be used without jQuery by using\n[Backbone.NativeView](https://github.com/akre54/Backbone.NativeView) instead of\nBackbone.View.\n\nIf Backbone.NativeView is available, then the VDOMView will use that instead of\nBackbone.View.\n\n---\n\n`Backbone.VDOMView` is used in [converse.js](https://conversejs.org).\n\nIf you have any questions, feel free to [create an issue](https://github.com/jcbrand/backbone.vdomview/issues)\nor [contact me directly](http://opkode.com/contact.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcbrand%2Fbackbone.vdomview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcbrand%2Fbackbone.vdomview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcbrand%2Fbackbone.vdomview/lists"}