jQuery View - TODO List

index.html

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      
      <h1 class="page-header">Todos</h1>
      
      <ul class="todo-list">
        <li :repeat="todo in todos">
          <strong :class="{todoDone: todo.done}">
            {{ todo.name }}
          </strong>
          <div class="pull-right">
            <button class="btn btn-sm btn-success" :click="this.toggle(todo)">
              <span class="glyphicon glyphicon-ok"></span>
            </button>
            <button class="btn btn-sm btn-danger" :click="this.remove(todo)">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </div>
        </li>
      </ul>
      
      <form class="todo-form" :submit="this.submitHandler($event)">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Add new TODO..." :data="todo">
        </div>
      </form>
      
    </div>
  </div>
</div>

jquery-view-todo-list.markdown

jQuery View - TODO List

A Pen by Samuel on CodePen.

License.

script.js

var defaultTodos = [
  {name: 'Improve jQuery View'},
  {name: 'Some other task'},
  {name: 'Bla Bla Bla', done: true}
]

var $$todoList = $('.todo-list').view({
  state: {
    todos: defaultTodos
  },
  
  add: function (todo) {
    this.insertIntoState('todos', {
      name: todo,
      done: false
    })
  },
  
  remove: function (todo) {
    this.removeFromState('todos', todo)
  },
  
  toggle: function (todo) {
    this.extendStateItem('todos', todo, {done: !todo.done})
  }
})

var $$todoForm = $('.todo-form').view({
  submitHandler: function (e) {
    e.preventDefault()
    $$todoList.add(this.data.todo)
    this.data.todo = ''
    this.data.$todo.focus()
  }
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://codepen.io/gsantiago/pen/eZEwMJ"></script>

style.stylus

.todo-list
  padding 0
  list-style-position inside
  li
    overflow auto
    margin-bottom 15px
 
.todo-form
  margin-top 50px
  
.todo-done
  text-decoration line-through

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />