virtual-view
What is it?
The virtual-view
is a view for the virtual dom similar to a backbone view.
Root Node
You can provide an argument for vitrual-view
allowing for a single Root Node.
# Require virtual-view VirtualView = require 'virtual-view' # Create the class Main # Set selector selector: '#main' # Main will now be a 'root' Virtual View and will also have the .el available main = root: true mainel # => Contains the DOM node (<div id="main"></div>) # sub will be a regular Virtual View sub = subel # => Undefined
Support
The virtual-view
provides you with the following
-
el
Contains the DOM node (which should be appended or prepended to the document.body) -
$el
Contains the VirtualDOM node representation (VirtualNode) -
selector
This will be the first argument in the h() (virtual-hyperscript) function. In here you can add a tagName, id and className all at once. The sting will be parsed e.g.span#super-class.special-layout.show
. -
this.addClass( String )
This function allows you to add a single class or multiple classes to the virtual tree. It only adds the unique ones. -
this.removeClass( String )
This function allows you to remove a single class or multiple classes from the virtual tree. It removes them if they are found. -
this.append( String or VirtualView [, Param {silent:true}] )
This function allows you to append a child to the virtual tree. Thesilent
param allows you to append without triggering the update function on the Root Node. This way you won't unnessisarily render when appending or prepending multiple Virtual Views. -
this.prepend( String or VirtualView [, Param {silent:true}] )
Same as append only this will prepend. -
this.update()
This function allows you to re-render the Root Node. You can call this after you've changed atributes on any Virtual View. However classes should be changed trough the addClass and removeClass functions. -
this.remove()
Removes element from the DOM and VirtualDOM
Example
Below you can find an example (in coffee-script) showing you how you could use the virtual-view
.
VirtualView = require 'virtual-view' selector: '#primary.make-me-the-first-child' events: 'click' : 'remove' : -> # Add a string @append 'I am Primary (the first child)' # Set selector selector : '#main.show-me' : -> # Add a single class @addClass 'this-class' # Add a string @append 'append-1 (text)' # Add a string @append 'append-2 (text)' # Add a Virtual View @prepend # Add multiple classes @addClass 'test1 test2 test3 test4' setTimeout=> # Remove a single class @removeClass 'this-class' # Remove a multiple classes @removeClass 'test3 test4' 3000 module.exports = Main # Prepend the main to the body documentbodyinsertBefore root: trueeldocumentbodyfirstChild
It's not done yet!
Up next:
-
Remove bug (multiple children cannot be removed out of order yet)
-
Reverse the silent argument, all virtual dom manipulations will be 'silent' update() has to be called to update the DOM or an argument
silent: false
. -
this.children This function will allow you to set a VirtualNode's children all at once.
-
this.toggleClass Toggles one or multiple classes on or off.
-
this.remove still needs to be analized. It's not at a maximum effencientcy, also I am quite sure not everything is removed from memory completely.
After removal all event listeners should be removed as well (this is still to be checked). -
Update the render procedure using Thunks or another method to prevent the diff function from checking Virtual Views that didn't change for sure