Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DomDataBind - Easy data binding</title>
  <script src="https://cdn.rawgit.com/purtuga/dom-data-bind/d4a1574/dist/dom-data-bind.js"></script>
  
</head>
<body>
  <p>
    <a href="https://github.com/purtuga/dom-data-bind">DomDataBind - github.com/purtuga/dom-data-bind</a>
  </p>
  <div>Open console and interact with window.data variable.</div>
  
  <div id="out">
    <h1>{{ labels.total }} {{ items.size }} <span>({{ prctDone }}%)</span></h1>
    <hr/>
    <div>
      <div _if="!items.size">No Todo Items</div>
      <div _each="(todo, index) in items" class="todo" _class="{ done: todo.done, isEditing: todo.edit }">
        <div _if="!todo.edit">
          <input type="checkbox" _on.change="done(todo)" _attr.checked="todo.done"/>
          <span class="todo-title clickable" _on.click='todo.edit = !todo.edit'>{{ todo.title }}</span>
        </div>
        
        <div _if="todo.edit">
          <input type="text" _attr.value="todo.title" _on.input="todo.title = $ev.target.value" />
          <div style="text-align:right;">
            <a class="clickable" style="color: red" _on.click="items.splice(index, 1), calcPrctDone()">Delete</a>
            <button _on.click="todo.edit = false">Save</button>
          </div>
        </div>
      </div>
    </div>
    <hr/>
    <div class="add">
      <input type="text" id="newTitle" placeholder="What todo" _on.input=" $data.errorMsg = ''"  _on.keyup="$ev.which === 13 && add()" />
      <button id="add" _on.click="add">Add</button>
      <div _show="errorMsg" style="color: red;">{{ errorMsg }}</div>
    </div>
  </div>
  
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers