findjashua · August 29, 2015 14:06
diff --git a/ractive-todos.html b/ractive-todos.html
 <!doctype html>
 <html>
    <head>
        <title>Ractive</title>
    </head>
    <body>
        <div id='container'></div>

        <script id='todos' type='text/template'>
            <div>
                <h1>Todos</h1>
            </div>
            <ul>
                {{#todos:index}}
                    <li>
                        {{>todo}}
                    </li>
                {{/todos}}
            </ul>
            <div>
                <input type='text' value='{{new_todo}}'>
                <button on-click='add'>Add</button>
            </div>
        </script>

        <script id='todo' type='text/template'>
            <p>
                <input type='checkbox' checked={{done}}>
                <span style={{strikethrough(done)}}>{{name}}</span>
                <button on-click='remove:{{index}}'>Remove</button>
            </p>
        </script>

        <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

        <script>
            var ractive = new Ractive({
                el: '#container',
                template: '#todos',
                data: {
                    todos: [
                        {
                            name: 'laundry',
                            done: false
                        },
                        {
                            name: 'grocery',
                            done: false
                        },
                        {
                            name: 'dishes',
                            done: false
                        }
                    ],
                    strikethrough: function(done) {
                        if(done === true) {
                            return 'text-decoration: line-through;';
                        } else {
                            return '';
                        }
                    }
                }
            });
            ractive.on({
                add: function(event) {
                    this.data.todos.push({
                        name: this.data.new_todo,
                        done: false
                    });
                    this.data.new_todo = '';
                    this.update();
                },
                remove: function(event, index) {
                    this.data.todos.splice(index,1);
                    this.update();
                },
                toggle_done: function(event, todo) {
                    todo.done = !todo.done;
                    this.update();
                }
            });
        </script>
    </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Ractive</title>
	</head>
	<body>
	<div id='container'></div>

	<script id='todos' type='text/template'>
	<div>
	<h1>Todos</h1>
	</div>
	<ul>
	{{#todos:index}}
	<li>
	{{>todo}}
	</li>
	{{/todos}}
	</ul>
	<div>
	<input type='text' value='{{new_todo}}'>
	<button on-click='add'>Add</button>
	</div>
	</script>

	<script id='todo' type='text/template'>
	<p>
	<input type='checkbox' checked={{done}}>
	<span style={{strikethrough(done)}}>{{name}}</span>
	<button on-click='remove:{{index}}'>Remove</button>
	</p>
	</script>

	<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

	<script>
	var ractive = new Ractive({
	el: '#container',
	template: '#todos',
	data: {
	todos: [
	{
	name: 'laundry',
	done: false
	},
	{
	name: 'grocery',
	done: false
	},
	{
	name: 'dishes',
	done: false
	}
	],
	strikethrough: function(done) {
	if(done === true) {
	return 'text-decoration: line-through;';
	} else {
	return '';
	}
	}
	}
	});
	ractive.on({
	add: function(event) {
	this.data.todos.push({
	name: this.data.new_todo,
	done: false
	});
	this.data.new_todo = '';
	this.update();
	},
	remove: function(event, index) {
	this.data.todos.splice(index,1);
	this.update();
	},
	toggle_done: function(event, todo) {
	todo.done = !todo.done;
	this.update();
	}
	});
	</script>
	</body>
	</html>