virtual-dom wrapper for opal
Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
opal
.codeclimate.yml
.gitignore
Gemfile
LICENSE.md
README.md
Rakefile
opal-virtual-dom.gemspec

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 broser 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! do
      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