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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!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-controller="Todos" sd-class="filter">
            <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">
                Total: <span sd-text="total < todos"></span> |
                Remaining: <span sd-text="remaining < completed"></span> |
                Completed: <span sd-text="completed"></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>
                <br>
                <a sd-on="click:removeCompleted">Remove Completed</a>
            </div>

        </div>
        <script>

            var Seed = require('seed')

            var todos = [
                { text: 'make nesting controllers work', done: true },
                { text: 'complete ArrayWatcher', done: false },
                { text: 'computed properties', done: false },
                { text: 'parse textnodes', done: false }
            ]

            Seed.controller('Todos', function (scope) {

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

                // computed properties
                scope.total = function () {
                    return scope.todos.length
                }

                scope.remaining = function () {
                    return scope.todos.length - scope.completed
                }

                // event handlers
                scope.addTodo = function (e) {
                    var val = e.el.value
                    if (val) {
                        e.el.value = ''
                        scope.todos.unshift({ text: val, done: false })
                    }
                }

                scope.removeTodo = function (e) {
                    scope.todos.remove(e.scope)
                    scope.completed -= e.scope.done ? 1 : 0
                }

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

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

                scope.removeCompleted = function () {
                    scope.todos = scope.todos.filter(function (todo) {
                        return !todo.done
                    })
                }

            })

            var app = Seed.bootstrap()

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