chiquitinxx/MyTodo.groovy

## index.gsp
<!doctype html>
<html>
<head>
    <title>Todo List</title>
</head>
<body>
<div id="app"></div>
    <asset:javascript src="grooscript-grails.js"/>
    <asset:javascript src="jquery-2.2.0.min.js"/>
    <asset:javascript src="webcomponents.min.js"/>

    <grooscript:remoteModel domainClass="todo.Todo"/>
    <grooscript:component src="component.MyTodo" name="my-todo-component"/>

    <my-todo-component></my-todo-component>

    <asset:deferredScripts/>
</body>
</html>

## MyTodo.groovy
package component

import todo.Todo

class MyTodo {

    List<Todo> todos
    String newTodoTyped

    static renderAfter = ['gotTodos', 'newTaskAdded']

    def gotTodos(newTodos) {
        todos = newTodos
    }

    def checkedChanged(check) {
        //Save the complete status: check.id + check.checked
    }

    def newTaskKey(element) {
        newTodoTyped = element.value
    }

    def saveNewTask() {
        if (newTodoTyped) {
            new Todo(name: newTodoTyped).save().then { newTodo ->
                //Saved in database
                newTaskAdded(newTodo)
            }
        }
    }

    def newTaskAdded(newTodo) {
        newTodoTyped = ''
        todos << newTodo
    }

    def render() {
        if (!todos) {
            Todo.list().then { list ->
                gotTodos list
            }
        } else {
            p {
                yield 'Insert new task:'
                input(type: 'text', onkeyup: 'newTaskKey')
                button(onclick: 'saveNewTask', 'Add task')
            }
            todos.each { todo ->
                li {
                    input(
                            id: todo.id,
                            type: "checkbox",
                            onchange: 'checkedChanged',
                            checked: todo.completed ? 'false': 'true'
                    ) {
                        yield todo.name
                    }
                }
            }
        }
    }
}

## Todo.groovy
package todo

import grails.rest.Resource

@Resource(uri='/todo', formats=['json'])
class Todo {
    String name
    boolean completed = false
}
	<!doctype html>
	<html>
	<head>
	<title>Todo List</title>
	</head>
	<body>
	<div id="app"></div>
	<asset:javascript src="grooscript-grails.js"/>
	<asset:javascript src="jquery-2.2.0.min.js"/>
	<asset:javascript src="webcomponents.min.js"/>

	<grooscript:remoteModel domainClass="todo.Todo"/>
	<grooscript:component src="component.MyTodo" name="my-todo-component"/>

	<my-todo-component></my-todo-component>

	<asset:deferredScripts/>
	</body>
	</html>
	package component

	import todo.Todo

	class MyTodo {

	List<Todo> todos
	String newTodoTyped

	static renderAfter = ['gotTodos', 'newTaskAdded']

	def gotTodos(newTodos) {
	todos = newTodos
	}

	def checkedChanged(check) {
	//Save the complete status: check.id + check.checked
	}

	def newTaskKey(element) {
	newTodoTyped = element.value
	}

	def saveNewTask() {
	if (newTodoTyped) {
	new Todo(name: newTodoTyped).save().then { newTodo ->
	//Saved in database
	newTaskAdded(newTodo)
	}
	}
	}

	def newTaskAdded(newTodo) {
	newTodoTyped = ''
	todos << newTodo
	}

	def render() {
	if (!todos) {
	Todo.list().then { list ->
	gotTodos list
	}
	} else {
	p {
	yield 'Insert new task:'
	input(type: 'text', onkeyup: 'newTaskKey')
	button(onclick: 'saveNewTask', 'Add task')
	}
	todos.each { todo ->
	li {
	input(
	id: todo.id,
	type: "checkbox",
	onchange: 'checkedChanged',
	checked: todo.completed ? 'false': 'true'
	) {
	yield todo.name
	}
	}
	}
	}
	}
	}
	package todo

	import grails.rest.Resource

	@Resource(uri='/todo', formats=['json'])
	class Todo {
	String name
	boolean completed = false
	}