Opal wrapper for virtual-dom javascript library. For more information see virtual-dom wiki page.
Server side (config.ru, Rakefile, Rails, Sinatra, etc.)
require 'opal-virtual-dom'Browser side
require 'opal'
require 'browser' # not required
require 'virtual_dom'
# if you're using browser and you want to have events and elements wrapped
require 'virtual_dom/support/browser'
class SampleList
include VirtualDOM
def initialize(elements = [])
@elements = elements
end
def create_hook(node, name, previous)
puts "I'm created: #{node}"
end
def render
# You can use chained methods
# to add class to elements
# use bang method to define element id
# <p id="example">
p.example! do
# <ul class="simple-list">
ul.simple_list.list(hook: Hook.method(method(:create_hook))) do
@elements.each do |string|
li class: class_names({empty: string.empty?}) do
text string
end
end
end
end
end
end
$document.ready do
list = SampleList.new(%w(one two three)).render.to_vnode
back = SampleList.new(%w(three two one)).render.to_vnode
root_node = VirtualDOM.create(list)
$document.body.inner_dom = root_node
diff = VirtualDOM.diff(list, back)
VirtualDOM.patch(root_node, diff)
end