ToDoMVC ( jQuery )

来源：互联网发布：什么叫自动编程编辑：程序博客网时间：2024/05/18 21:48

index.html

<!doctype html><html lang="en" data-framework="jquery">    <head>        <meta charset="utf-8">        <title>jQuery • TodoMVC</title>        <link rel="stylesheet" href="node_modules/todomvc-common/base.css">        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">        <link rel="stylesheet" href="css/app.css">    </head>    <body>        <section id="todoapp">            <header id="header">                <h1>todos</h1>                <input id="new-todo" placeholder="What needs to be done?" autofocus>            </header>            <section id="main">                <input id="toggle-all" type="checkbox">                <!--向下的箭头-->                <label for="toggle-all">Mark all as complete</label>                <ul id="todo-list"></ul>            </section>            <footer id="footer"></footer>        </section>        <footer id="info">            <p>Double-click to edit a todo</p>            <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>            <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>        </footer>        <script id="todo-template" type="text/x-handlebars-template">        <!--有点不太明白-->            {{#this}}            <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">                <div class="view">                    <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>                    <label>{{title}}</label>                    <button class="destroy"></button>                </div>                <input class="edit" value="{{title}}">            </li>        {{/this}}        </script>        <script id="footer-template" type="text/x-handlebars-template">            <span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span>            <ul id="filters">                <li>                    <a {{#eq filter 'all'}}class="selected"{{/eq}} href="#/all">All</a>                </li>                <li>                    <a {{#eq filter 'active'}}class="selected"{{/eq}}href="#/active">Active</a>                </li>                <li>                    <a {{#eq filter 'completed'}}class="selected"{{/eq}}href="#/completed">Completed</a>                </li>            </ul>            {{#if completedTodos}}<button id="clear-completed">Clear completed</button>{{/if}}        </script>        <script src="node_modules/todomvc-common/base.js"></script>        <script src="node_modules/jquery/dist/jquery.js"></script>        <script src="node_modules/handlebars/dist/handlebars.js"></script>        <script src="node_modules/director/build/director.js"></script>        <script src="js/app.js"></script>    </body></html>

app.js

/*global jQuery, Handlebars, Router */jQuery(function ($) {    'use strict';    Handlebars.registerHelper('eq', function (a, b, options) {        return a === b ? options.fn(this) : options.inverse(this);    });    var ENTER_KEY = 13;    var ESCAPE_KEY = 27;    var util = {        uuid: function () {            /*jshint bitwise:false */            var i, random;            var uuid = '';            for (i = 0; i < 32; i++) {                random = Math.random() * 16 | 0;                if (i === 8 || i === 12 || i === 16 || i === 20) {                    uuid += '-';                }                uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);            }            return uuid;        },        pluralize: function (count, word) {            return count === 1 ? word : word + 's';        },        store: function (namespace, data) {            if (arguments.length > 1) {                return localStorage.setItem(namespace, JSON.stringify(data));            } else {                var store = localStorage.getItem(namespace);                return (store && JSON.parse(store)) || [];            }        }    };    var App = {        init: function () {            this.todos = util.store('todos-jquery');            this.todoTemplate = Handlebars.compile($('#todo-template').html());            this.footerTemplate = Handlebars.compile($('#footer-template').html());            this.bindEvents();            new Router({                '/:filter': function (filter) {                    this.filter = filter;                    this.render();                }.bind(this)            }).init('/all');        },        bindEvents: function () {            $('#new-todo').on('keyup', this.create.bind(this));            $('#toggle-all').on('change', this.toggleAll.bind(this));            $('#footer').on('click', '#clear-completed', this.destroyCompleted.bind(this));            $('#todo-list')                .on('change', '.toggle', this.toggle.bind(this))                .on('dblclick', 'label', this.editingMode.bind(this))                .on('keyup', '.edit', this.editKeyup.bind(this))                .on('focusout', '.edit', this.update.bind(this))                .on('click', '.destroy', this.destroy.bind(this));        },        render: function () {            var todos = this.getFilteredTodos();            $('#todo-list').html(this.todoTemplate(todos));            $('#main').toggle(todos.length > 0);            $('#toggle-all').prop('checked', this.getActiveTodos().length === 0);            this.renderFooter();            $('#new-todo').focus();            util.store('todos-jquery', this.todos);        },        renderFooter: function () {            var todoCount = this.todos.length;            var activeTodoCount = this.getActiveTodos().length;            var template = this.footerTemplate({                activeTodoCount: activeTodoCount,                activeTodoWord: util.pluralize(activeTodoCount, 'item'),                completedTodos: todoCount - activeTodoCount,                filter: this.filter            });            $('#footer').toggle(todoCount > 0).html(template);        },        toggleAll: function (e) {            var isChecked = $(e.target).prop('checked');            this.todos.forEach(function (todo) {                todo.completed = isChecked;            });            this.render();        },        getActiveTodos: function () {            return this.todos.filter(function (todo) {                return !todo.completed;            });        },        getCompletedTodos: function () {            return this.todos.filter(function (todo) {                return todo.completed;            });        },        getFilteredTodos: function () {            if (this.filter === 'active') {                return this.getActiveTodos();            }            if (this.filter === 'completed') {                return this.getCompletedTodos();            }            return this.todos;        },        destroyCompleted: function () {            this.todos = this.getActiveTodos();            this.filter = 'all';            this.render();        },        // accepts an element from inside the `.item` div and        // returns the corresponding index in the `todos` array        getIndexFromEl: function (el) {            var id = $(el).closest('li').data('id');            var todos = this.todos;            var i = todos.length;            while (i--) {                if (todos[i].id === id) {                    return i;                }            }        },        create: function (e) {            var $input = $(e.target);            var val = $input.val().trim();            if (e.which !== ENTER_KEY || !val) {                return;            }            this.todos.push({                id: util.uuid(),                title: val,                completed: false            });            $input.val('');            this.render();        },        toggle: function (e) {            var i = this.getIndexFromEl(e.target);            this.todos[i].completed = !this.todos[i].completed;            this.render();        },        editingMode: function (e) {            var $input = $(e.target).closest('li').addClass('editing').find('.edit');            $input.val($input.val()).focus();        },        editKeyup: function (e) {            if (e.which === ENTER_KEY) {                e.target.blur();            }            if (e.which === ESCAPE_KEY) {                $(e.target).data('abort', true).blur();            }        },        update: function (e) {            var el = e.target;            var $el = $(el);            var val = $el.val().trim();            if (!val) {                this.destroy(e);                return;            }            if ($el.data('abort')) {                $el.data('abort', false);            } else {                this.todos[this.getIndexFromEl(el)].title = val;            }            this.render();        },        destroy: function (e) {            this.todos.splice(this.getIndexFromEl(e.target), 1);            this.render();        }    };    App.init();});

效果：
这里写图片描述

阅读全文

0 0