I am super excited to announce my latest Open Sauce JavaScript framework/library: inDIVisible. Let me tell you why it’s the answer to everything, and you should start using it right now.
Everyone knows HTML is old-skool. All those elements, bleurgh. Boring names, boring properties. And they aren’t dynamic – they just describe content! Clearly they are unfit for use in Modern Web Applications.
Instead, simplify your life AND get all the JavaScript goodness you crave using inDIVisible. Here’s how:
Yo peeps (not hello world)
<div>Yo peeps!</div>
Pretty simple, right? But this doesn’t do anything. Let’s bind it to our JavaScript model called div.
<div #div="div"></div>
Easy! Whenever your model changes your element updates automagically. This should be enough for you to write a Facebook killer, but there’s more!
Handling input
Want to update the div property in your div model? No problem!
<div [div@] ?div="div.div"></div>
This attribute:
[div@]
Tells inDIVisible to turn the element into an input field. That’s right! No need for pesky input elements.
And this attribute:
?div="div.div"
Updates the div.div property with the value the user enters. It couldn’t be easier!
What’s that? You need a checkbox? Piffle:
<div [div/] ?div="div.div"></div>
See that /? It looks like a tick, which is like a checkbox. Radio buttons are like this:
<div [div.] ?div="div.div"></div>
And if you want a button, just do this;
<div [div]></div>
But buttons *do* stuff, right? What you need is to call a function.
Functions
inDIVisible is a functional framework/library, too. You can invoke functions like this:
<div (div)="div.div"></div>
Just handle the click event (there aren’t any other events worth handling) you want to respond to like this:
(div)
Then name the function you want to run:
="div.div"
Woah! Genius!
Advanced usage
Need to handle loops? Behold:
<div #div="div.div" *div></div>
That cheeky little * tells inDIVisible to repeat the element for each item in the model.
And how about showing and hiding elements? It’s as easy as this to show the element only if the element is truthy:
<div #div="div.div" +div></div>
And you do this to hide the element only if the element is falsy:
<div #div="div.div" -div></div>
CLA
CLI is a Command Line Interface. But inDIVisible is better than that, so it has CLA – Command Line Awsomeness. Type commands like this in your bishbashbosh shell to make cool stuff happen:
div div /div divdiv-div
Honestly, why are you still here? Use it now, you bunch of hipster sheep.
Install
No-one downloads anything now, so there’s no link to any files. Instead you should type one of these commands, whichever one is going to work for you:
grunt install inDIVisible gulp install inDIVisible snort install inDIVisible sniffle install inDIVisible fart install inDIVisible bower install inDIVisible bowel install inDIVisible flump install inDIVisible twerk install inDIVisible plonk install inDIVisible
Then build it and run it. I’ll leave you to figure out those commands, because I have to go drink some organic kale and quinoa juice.