to-do.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
$ ->
	$("form#form_test").bind "ajax:success",(data, cdata, xhr) ->
		if cdata.status is 0
			alert("ss")

	tmpl = $('#tmpl-item').html()
	todoItemHTML = (id, txt) ->
		tmpl.split('{id}').join(id).split('{txt}').join(txt)

	db = $.WebSQL('todo')

	db.query(
		'CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, isDone, txt)',
		'CREATE INDEX IF NOT EXISTS todos__done ON todos (isDone)'
	)
		.fail (tx, err) ->
			alert('An error occurred while loading the todos')
			throw new Error(err.message)
		.done (todos) ->
			items = []
			if todos.length is not 0
				for i in [0..todos.length] 
					items[i] = todoItemHTML(todos[i].id, todos[i].txt)
			$('#todos').html(items.join(''))

	$('#todos').on 'change', ':checkbox', ->
		$this = $(this)
		todoID = $this.val()

		db.query('UPDATE todos SET isDone = 1 WHERE id = ?', [todoID])
			.fail (tx, err) ->
				alert('An error occured while marking your todo as complete.')
				throw new Error(err.message)
			.done ->
				$li = $this.closest('li')
				$li.slideUp ->
					$li.remove()

	$('form').on 'submit', (e) ->
		$input =$('input[name=todo]', this)
		txt = $input.val()

		e.preventDefault()

		db.query('INSERT INTO todos (txt) VALUES (?)', [txt])
			.fail (tx, err) ->
				alert('An error occurred while creating your todo.')
				throw new Error(err.message)
			.done (res) ->
				$(todoItemHTML(res.insertId, txt))
					.hide()
					.prependTo('#todos')
					.slideDown()
				$input.val('')
	$('input[name=todo]').focus()

https://github.com/psayre23/WebSQL

<script type="text/tmpl" id="tmpl-item">

{txt}

</script>

<script type="text/tmpl" id="tmpl-item">
    <li>
        <input type="checkbox" value="{id}"/>
        <span>{txt}</span>
    </li>
</script>