Weby

Weby lets you easily handle and generate HTML, XHTML or XML code in Ruby. It can be used both as a templating system and as a programmatic HTML generator. You can even mix templating and programmatic HTML, so you're free to use it as you like.

Installation

Add this line to your application's Gemfile:

gem 'weby'

And then execute:

$ bundle

Or install it yourself as:

$ gem install weby

Usage

Here's some example:

require 'rubygems'
require 'weby'

#Loading a template

html = "<div id=\"main\">\n    <h1>Hello</h1>\n    <ul>\n    <li></li>\n    </ul>\n    <select>\n    <option></option>\n    </select>\n    <table>\n    <tr>\n        <td></td>\n    </tr>\n    </table>\n    <span wby-if=\"num.even?\">An even number</span>\n    <span wby-if=\"num.odd?\">An odd number</span>\n</div>\n"

h = HTML.parse html

puts h

Now let's see some evaluation feature:

num = 2
h.evaluate binding: binding
puts h.to_html

This will output:

    <div id="main">
        <h1>Hello</h1>
        <ul>
            <li>
        </ul>
        <select>
            <option></option>
        </select>
        <table>
            <tr>
                <td></td>
            </tr>
        </table>
        <span>An even number</span>

    </div>

Now let's manipulate HTML elements:

h.find('#main').append {
    h2{'Title'}
}
h.append {
    div(id: 'body'){'World'}
}
h.find('h1').add_class 'header'
h.find('h1,h2').add_class 'title'
puts h.to_html

Output:

<div id="main">
    <h1 class="header title">Hello</h1>
    <ul>
        <li>
    </ul>
    <select>
        <option></option>
    </select>
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
    <span>An even number</span>

    <h2 class="title">Title</h2>
</div>
<div id="body">World</div>

We can also use some element as a template for given data:

li = h.find 'ul li'
li.as_template %w(Apple Banana)
puts h

Output:

...

<ul>
    <li>Apple</li>
    <li>Banana</li>
</ul>

...

More complex templating:

o = h.find 'option'
o.as_template [
    {value: '#fff', content: :white},
    {value: '#000', content: :black}
]

Will produce:

...

<select>
    <option value="#fff">white</option>
    <option value="#000">black</option>
</select>

...

tr = h.find 'tr'
tr.as_template [
    {
        id: 'user-1',
        select: {td: {content: 'User 1'}}
    },
    {
        id: 'user-2',
        select: {td: {content: 'User 2'}}
    },
]

<table>
    <tr id="user-1">
        <td>User 1</td>
    </tr>
    <tr id="user-2">
        <td>User 2</td>
    </tr>
</table>

We can also easily manipulate style and data:

main = h.find '#main'
main.style :width, '800px'
main.style height: '100%', border: '1px solid'
main.data 'pageid', '1'
main.data userid: 1, username: 'admin'

<div id="main" style="width: 800px; height: 100%; border: 1px solid" data-pageid="1" data-userid="10" data-username="artix">

...

</div>

Contributing

1. Fork it ( https://github.com/artix75/weby/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request