README
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
class Main extends VirtualView
# Set selector
selector: '#main'
# Main will now be a 'root' Virtual View and will also have the .el available
main = new Main root: true
main.el # => Contains the DOM node (<div id="main"></div>)
# sub will be a regular Virtual View
sub = new Main
sub.el # => 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'
class Primary extends VirtualView
selector: '#primary.make-me-the-first-child'
events:
'click' : 'remove'
initialize: ->
# Add a string
@append 'I am Primary (the first child)'
class Main extends VirtualView
# Set selector
selector : '#main.show-me'
initialize: ->
# 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 new Primary
# 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
document.body.insertBefore (new Main root: true).el, document.body.firstChild
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