https://github.com/fazibear/opal-virtual-dom

virtual-dom wrapper for opal
https://github.com/fazibear/opal-virtual-dom

Last synced: 8 days ago
JSON representation

virtual-dom wrapper for opal

• Host: GitHub
• URL: https://github.com/fazibear/opal-virtual-dom
• Owner: fazibear
• License: mit
• Created: 2015-07-24T13:11:36.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-10-02T18:43:15.000Z (about 5 years ago)
• Last Synced: 2024-05-01T19:58:02.665Z (6 months ago)
• Language: Ruby
• Size: 58.6 KB
• Stars: 22
• Watchers: 6
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-opal - Opal VirtualDOM - virtual-dom wrapper for opal (Uncategorized / Uncategorized)

README

        
# Virtual Dom support for Opal

[![Gem Version](https://badge.fury.io/rb/opal-virtual-dom.svg)](http://badge.fury.io/rb/opal-virtual-dom)

[![Code Climate](https://codeclimate.com/github/fazibear/opal-virtual-dom/badges/gpa.svg)](https://codeclimate.com/github/fazibear/opal-virtual-dom)

## Description

Opal wrapper for [virtual-dom](https://github.com/Matt-Esch/virtual-dom) javascript library. For more information see [virtual-dom wiki page](https://github.com/Matt-Esch/virtual-dom/wiki).

## Usage

Server side (config.ru, Rakefile, Rails, Sinatra, etc.)

```ruby

require 'opal-virtual-dom'

```

Browser side

```ruby

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.example! 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

```

## Thank you!

[![Become Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=6912974)