Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Virtual Dom support for Opal

Gem Version Code Climate

Description

Opal wrapper for virtual-dom javascript library. For more information see virtual-dom wiki page.

Usage

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

Thank you!

Become Patreon

About

virtual-dom wrapper for opal

Resources

License

Sponsor this project

 

Packages

No packages published

Languages

You can’t perform that action at this time.