jamieorc / elemental Goto Github PK
View Code? Open in Web Editor NEWHTML Elements as ERB Helper-Methods
Home Page: http://github.com/jamieorc/elemental/wikis/home
License: MIT License
HTML Elements as ERB Helper-Methods
Home Page: http://github.com/jamieorc/elemental/wikis/home
License: MIT License
= Elemental === HTML Element Names as Helper Methods === Summary Introduces builder-like syntax to rhtml: <%= p @item.content %> <%= p span @person.first_name, :id => dom_id(@person, "name_") %> or even <% table do @list.each do |item| tr do %> <%= td item.name %> <%= td item.content %> <% end end end %> Elemental allows you to use XHTML Transitional tags as helper methods in your rhtml. With traditional ERb, the code above would be written: <p><%= @item.content %></p> <p><span id="<%= dom_id(@person, "name_") %>"><%= @person.first_name %></span></p> and <table> <% @list.each do |item| -%> <tr> <td><%= item.name %></td> <td><%= item.content %></td> </tr> <% end %> </table> That's more code, more noise as angle-brackets (especially embedded inside the html tag), and more lines. Elemental's syntax is also cleaner and terser than when using _content_tag_: <%= content_tag "p", @item.content %> <%= content_tag "p", content_tag "span", @person.first_name, :id => dom_id(@person, "name_") %> and you can't send a block to _content_tag_ <table> <% @list.each do |item| -%> <tr> <%= content_tag "td", item.name %> <%= content_tag "td", item.content %> </tr> <% end %> </table> <table> === Usage Elemental has three basic usages: 1. Self-closing tags: no argument, or hash only for argument: <% br %> <% br :class => "someClass" %> 2. Content tags: first argument is the value of the content: <%= p "some content" %> <%= p "some content", :id => dom_id(@object) %> 3. Content tags with a block argument: <% div :class => "some-class" do %> ... <% end %> You can nest Elemental methods: <%= p span @object.value %> or <%= p(span(@object.value)) %> generates: <p><span>the object's value</span></p> The same thing with attributes (pay attention to your parentheses): <%= p span @object.value, :id => "some_id", :class => "some_class" %> generates: <p><span id="some_id" class="some_class">the object's value</span></p> while <%= p span(@object.value, :id => "some_id"), :class => "some_class" %> generates: <p class="some_class"><span id="some_id">the object's value</span></p> You can nest the methods in blocks: <% p do %> <% span :class => "someClass" do %> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <% end %> <% end %> or <% p do span :class => "someClass" do %> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <% end end %> which both generate: <p> <span class="someClass"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> </p> This is useful for loops: <% ul do ['one', 'two', 'three'].each do |item| %> <%= li item %> <% end end %> which generates: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> === Options/Attributes Hash Options are converted to regular html attributes. None are filtered, so you can certainly insert invalid attributes. <%= span :id => "some_id", :bogus_attribute => "some_value"%> generates: <span id="some_id" bogus_attribute="some_value"></span> === Omitted Tags Rails' ActionView::Helpers already defines _form_, _select_, and _input_, so these are omitted from Elemental. === Motivation Afer using Markaby a bit, I decided there were situations where I wanted a Markaby or Builder-type syntax within rhtml's context. I had been using _content_tag_ quite a bit for convenience, but wanted more _legible_ and _concise_ code, espcially for loops. === Acknowledgments _why for Markaby and its list of XHTML and XHTML Transitional tag lists, which I used.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.