KO
|
EN
gitlite — search
Search
#javascript
#python
#hacktoberfest
#react
#ai
#typescript
#llm
#go
#golang
#android
#machine-learning
#rust
#deep-learning
#linux
backbone.vdomview
★ 21
Open GitHub ↗
VirtualDOM-aware Backbone View
Download README (.md)
Explore Similar Repositories
sc2atari
:
Convert sc2 environment to gym-atari and play some mini-games
SR-CNN-VAE-GAN
:
Semi-Recurrent CNN-based VAE-GAN for Sequential Data Generation
forcefully-remove-bootfb
:
releases memory areas used for BOOTFB for linux/kvm/vfio/pci-passthrough
TikzTemplates
:
Different Tikz templates.
PhysX.GH
:
PhysX.GH is an open source rigid body simulation tool for Grasshopper using NVIDIA PhysX
// repository documentation
Was this content helpful?
★ 0
(0 ratings)
Select Rating:
★
★
★
★
★
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
backbone.vdomview
?
Download (.md)
# backbone.vdomview ## Note: Check out Skeletor instead If you're looking for a way to write declarative views that only update the changed parts of the DOM, take a look at [Skeletor](https://github.com/conversejs/skeletor), and in particular the `ElementView` class. It does the same thing as the `VDOMView` in this package, but much better and quicker. Skeletor is a fork of Backbone that adds [various new features](https://github.com/conversejs/skeletor#sekeletor-adds-the-following-changes-to-backbone), but you can continue using Backbone and just start using the `ElementView`. --- This library provides a VirtualDOM-aware Backbone View, called `Backbone.VDOMView`. It depends on [snabbdom](https://github.com/snabbdom/snabbdom) for the virtual-DOM implementation. ## How to use To use it, extend `Backbone.VDOMView`. Then, instead of implementing a `render` method in your view, add a `toHTML` method which returns the View's HTML as a string (or alternatively, add a `toDOM` method which returns a single DOM element). The HTML of the `toHTML` must be structured so that there's a root element containing everything else. This root element is the view's top-level element, in other words, it's the DOM node represented by the `this.el` or `this.$el` attribute of the View. React has a similar requirement that JSX returned by a component's `render` method should have a root node which contains everything else. The rest will then be handled by `VDOMView`, which will automatically generate a diff between the view's current DOM element and new virtual-DOM node and then patch the actual DOM with this diff. For example: const MyView = Backbone.VDOMView.extend({ tagName: 'span', className: 'vdom-span', toHTML () { return this.template(_.assign(this.model.toJSON())); } }); ### The toHTML method One important difference between `Backbone.VDOMView` and `Backbone.View` that should be noted is that the HTML being rendered (in the case of `Backbone.VDOMView` this is done in the `toHTML` method) should include the root element of the view. So in the example above `toHTML` should return `<span class="vdom-span"> ... </span>` as the outer part of the HTML string. This is different from normal Backbone.View classes, where your template will only return the *inner* part of the view element. ### Event registration on virtual nodes [Snabbdom](https://github.com/snabbdom/snabbdom) implements non-core functionality in separate modules. Backbone.VDOMView makes use of all Snabbdom's modules except for the `eventlisteners` module. The `eventlisteners` module allows you to add event listeners when creating a virtual node via the `h` method. However Backbone.VDOMView doesn't use the `h` method of Snabbdom at all (it doesn't even include the code for it). Instead, it expects you to render the HTML for the view in the `toHTML` method, for example by using an underscore or lodash template. There's therefore no way to attach these event listeners. This way of registering event listeners is also in contrast to [Backbone's declarative way of registering events](http://backbonejs.org/#View-events), which is more the "Backbone way". Backbone.VDOMView will make sure that these declaratively registered event listeners will remain active whenever the View's DOM representation changes. ### The beforeRender and afterRender lifecycle methods `Backbone.VDOMView` will call two lifecycle methods (if they exist). These are `beforeRender` and `afterRender` and are respectively called before and after `toHTML` is called. ### Using Backbone.VDOMView without jQuery Backbone can be used without jQuery by using [Backbone.NativeView](https://github.com/akre54/Backbone.NativeView) instead of Backbone.View. If Backbone.NativeView is available, then the VDOMView will use that instead of Backbone.View. --- `Backbone.VDOMView` is used in [converse.js](https://conversejs.org). If you have any questions, feel free to [create an issue](https://github.com/jcbrand/backbone.vdomview/issues) or [contact me directly](http://opkode.com/contact.html).
