vuejs
/
vue
mirror of https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html>
	<head>
		<title>Todo</title>
		<meta charset="utf-8">
		<script src="dist/seed.js"></script>
		<style type="text/css">
			.red {
				color: red;
			}
            .done {
                text-decoration: line-through;
            }
            #app.all .all {
                font-weight: bold;
            }
            #app.remaining .todo.done {
                display: none;
            }
            #app.remaining .remaining {
                font-weight: bold;
            }
            #app.completed .todo:not(.done) {
                display: none;
            }
            #app.completed .completed {
                font-weight: bold;
            }
		</style>
	</head>
	<body>
		<div id="app" sd-class="filter" sd-controller="TodoList">
            <div>
                <input placeholder="What needs to be done?" sd-on="change:addTodo">
            </div>
            <ul sd-show="todos">
            	<li class="todo" sd-each="todo:todos" sd-class="done:todo.done">
                    <input type="checkbox" sd-checked="todo.done" sd-on="change:toggleTodo">
                    <span sd-text="todo.text"></span>
                    <a sd-on="click:removeTodo">X</a>
                </li>
            </ul>
            <div id="footer">
                Remaining: <span sd-text="remaining"></span><br>
                <a class="all" sd-on="click:setFilter">Show All</a> |
                <a class="remaining" sd-on="click:setFilter">Show Remaining</a> |
                <a class="completed" sd-on="click:setFilter">Show Completed</a>
            </div>
        </div>
		<script>

            var data = {
                todos: [
                    {
                        text: '1!',
                        done: false
                    },
                    {
                        text: '2!',
                        done: false
                    },
                    {
                        text: '3!',
                        done: true
                    }
                ]
            }

			var Seed = require('seed')

            Seed.controller('TodoList', function (scope, seed) {

                scope.filter = 'all'
                scope.remaining = scope.todos.reduce(function (count, todo) {
                    return count + (todo.done ? 0 : 1)
                }, 0)

                scope.addTodo = function (e) {
                    var text = e.el.value
                    if (text) {
                        e.el.value = ''
                        scope.todos.push({
                            text: text,
                            done: false
                        })
                        scope.remaining++
                    }
                }

                scope.removeTodo = function (e) {
                    var i = e.seed.eachIndex
                    scope.todos.splice(i, 1)
                    scope.remaining -= e.seed.scope.done ? 0 : 1
                }

                scope.toggleTodo = function (e) {
                    scope.remaining += e.seed.scope.done ? -1 : 1
                }

                scope.setFilter = function (e) {
                    scope.filter = e.el.className
                }
            })

			var app = Seed.bootstrap({
                el: '#app',
                data: data
            })

		</script>
	</body>
</html>