Skip to content

simple dom wrapper, inspired by christian johansen's talk on functional javascript

License

Notifications You must be signed in to change notification settings

buzzdecafe/rdom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#rdom

rdom is a simple function that simplifies DOM element creation.

##API

rdom :: String -> Object -> [DOM] -> DOM

rdom is a curried function that takes a String document-element name, an object that maps its keys to the element's attributes, amd an Array of child elements. You may also include a plaintext String in the child elements Array, and it will be converted to a text node. rdom returns a DOM tree, with the specified tag at the root.

A number of functions are defined as properties on the rdom function. These are simply partially applied calls to rdom with just the tag name. This generates functions of the type Object -> [DOM] -> DOM. rdom includes div, h1, input, p, and several others. This is merely a convenience, so it is easy to write code like this:

var tree = rdom.div({id: 'main'}, [
  rdom.p({}, ["Imagine your ad here"]),
  rdom.ul({className: 'mainlist'}, [
    rdom.li({}, ["First LI"]),
    rdom.li({className: 'active'}, ["Second LI"]),
    rdom.li({}, ["Third LI"])
  ])
]);

This produces a DOM tree that looks like this:

<div id="main">
  <p>Imagine your ad here</p>
  <ul class="mainlist">
    <li>First LI</li>
    <li class="active">Second LI</li>
    <li>Third LI</li>
  </ul>
</div>

Originally inspired by Christian Johansen's talk Pure, Functional JavaScript.

About

simple dom wrapper, inspired by christian johansen's talk on functional javascript

Resources

License

Stars

Watchers

Forks

Packages

No packages published