How it works

Okay Enhances HTML with data-attributes and JSON

<html>
  <label for='amazing'>
    <input type='checkbox' data-emit='{"amazing": "[checked]"}'> Amazing
  </label>

  <div data-watch-class='{"amazing":"hidden"}'>
    Why isn't this amazing? <a href="https://docs.google.com/a/sourcery.us/forms/d/1aRAq1eF3oFVGemSbw_ZqZwOlGqI_1py4il7QaBLS06s/viewform">We love feedback!</a>
  </div>

  <script src='./path/to/okay.js'></script>
</html>

Try it out!

Amazing

What isn't amazing? We love feedback!

More examples

Set an HTML Class on an Element

<div id="example">
  <div id="watcher" data-watch-class='{"classExample:hidden": "hidden"}'>The div is not hidden.</div>
  <hr>
  <button data-emit='{"classExample:hidden":true}' class="btn btn-info">Hide the DIV</button>
  <button data-emit='{"classExample:hidden":false}' class="btn btn-info">Show the DIV</button>
</div>

Try it out!

The div is not hidden.

Set HTML Attribute

<div id="example">
  <div id="watcher" data-watch-attr='{"info":"title"}'>This div has no title.</div>
  <hr>
  <button data-emit='{"info":"The text in this div is now a lie."}' class="btn btn-info">Set title</button>
</div>

Try it out!

This div has no title.

Replace HTML in Element

<div id="example">
  <div id="watcher" data-watch-html='{"htmlExample:content":true}'>This div in its original state.</div>
  <hr>
  <button data-emit='{"htmlExample:content":" Replacement text."}' class="btn btn-info">Prepend</button>
</div>

Try it out!

This div in its original state.

Append HTML to Element

<div id="example">
  <div id="watcher" data-watch-html='{"appendExample:content":"append()"}'>This div in its original state.</div>
  <hr>
  <button data-emit='{"appendExample:content":" Appended text."}' class="btn btn-info">Prepend</button>
</div>

Try it out!

This div in its original state.

Prepend HTML to Element

<div id="example">
  <div id="watcher" data-watch-html='{"prependExample:content":"prepend()"}'>This div in its original state.</div>
  <hr>
  <button data-emit='{"prependExample:content":" Prepended text."}' class="btn btn-info">Prepend</button>
</div>

Try it out!

This div in its original state.

Check and Uncheck Checkbox

<div id="example">
  <div>
    <input type="checkbox" id="emitter" data-emit='{"active": "[checked]"}'>
    <label for="emitter">Hide</label>
  </div>
   <div data-watch-class='{"active":"hidden"}'>
    <label for="field">Reason</label>
    <input type="text" id="field" data-watch-attr='{"active":"disabled"}'>
  </div>
   <div data-watch-class='{"active": "hidden"}'>Checkbox is unchecked</div>
  <div class="hidden" data-watch-class='{"!active": "hidden"}'>Checkbox is checked</div>
</div>

Try it out!

Hide

Reason

Checkbox is unchecked

Use HTML Select Element Options to Manipulate DOM

<div id="example">
  <label for="entree">Entree</label>
  <select data-emit='{"entree":"[options]"}' id="entree">
    <option>-- Choose --</option>
    <option name="burger">Hamburger</option>
    <option name="cheese">Grilled Cheese</option>
    <option name="fries">Fries Only</option>
  </select>
   <div class="hidden" data-watch-class='{"entree[fries],entree[null]": "hidden"}'>
    <input type="checkbox" name="fries" id="fries" data-watch-attr='{"entree[fries],entree[null]": "disabled"}' disabled>
    <label for="fries">Would you like fries with that?</label>
  </div>
</div>

Try it out!

Entree

Input value

<div id="example">
  <div>
    <div>
      <label for="source_value">
        What do you say?
        <input type="text" data-emit='{"user_input":"[value]"}' id="source_value">
      </label>
    </div>
    <div>
      You entered:
      <span data-watch-html='{"user_input":""}'>(enter some text above)</span>
    </div>
  </div>
</div>

Try it out!

What do you say?

You entered: (enter some text above)

Submit form

<div id="example">
  <div>
    <form id="submitted_by_checkbox" action="#submitted" data-watch-submit='{"submit.active":true}' data-watch-attr='{"submit.action":"action"}'>
      <div>
        <label for="submit_form">
          <input type="checkbox" data-emit='{"submit.active":"[checked]"}' id="submit_form">
          Submit me!
        </label>
      </div>
       <div>
        <label for="location_hash">
          Where do you want to go?
          <input type="text" data-emit='{"submit.action":"#{value}"}' id="location_hash">
        </label>
      </div>
    </form>
  </div>
</div>

Try it out!

Click link

<div id="example">
  <div>
    <ul class="list-group">
      <a href="javascript:void(0)" data-emit='{"clickLink:1:on":true}' data-watch-class='{"clickLink:1:on":"list-group-item-warning"}' class="list-group-item list-group-item-info">
        <span id="turnOn">On</span>
      </a>
      <a href="javascript:void(0)" data-emit='{"clickLink:1:on":false}' class="list-group-item">Off</a>
    </ul>
  </div>
</div>

Try it out!

Off

Event options ("Keyup" event type)

<div id="example">
  <div>
    <label for="keyup_control">Type something here:</label>
    <input type="text" data-emit='{"keyup.data":"{value}"}' data-emit-event='{"type":"keyup"}' id="keyup_control">
  </div>
   <div>
    Shows up here:
    <span data-watch-html='{"keyup.data":""}'></span>
  </div>
</div>

Try it out!

Type something here:

Shows up here:

Made by