vuejs
/
vue
zrcadlo https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!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-data="test" 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"></span> |
                Completed: <span sd-text="completed < remaining total"></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 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.data('test', { todos: todos })

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

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

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

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

                // event handlers
                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) {
                    scope.todos.splice(e.seed.index, 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
                }

            })

            Seed.bootstrap()

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