文档章节

backbone todos

L
 LorinLuo
发布于 2015/03/25 11:50
字数 663
阅读 31
收藏 0

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background-color: #eaeaea;

            font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

        }

        header,section,footer{

            display: block;

        }

        #todo{

            width: 500px;

            margin: 0 auto;

            background-color: white;

            padding: 20px;

            border-radius: 0 0 8px 8px;

            -webkit-box-shadow: 0px 1px 4px 2px #bababa;

        }

        header>h1{

            text-align: center;

            margin: 10px 0 20px 0;

        }

        header>input{

            /*display: block;*/

            line-height: 28px;

            font-size: 25px;

            font-style: italic;

            padding: 6px;

            margin-bottom: 5px;

            width: 100%;

            box-sizing: border-box;

            outline: none;

        }

        .views{

            display: none;

        }

        .views>p{

            height: 25px;

            line-height: 25px;

            margin-bottom: 10px;

        }

        .views>p>*{

            vertical-align: middle;

        }

        #select-all{

            margin-right: 5px;

        }

        .todoList>li{

            list-style-type: none;

            position: relative;

            padding: 10px 0;

            font-size: 24px;

        }

        .todoList>li>.view>*{

            vertical-align: middle;

            height: 30px;

            line-height: 30px;

        }

        .edit{

            display: none;

            position: absolute;

            top: 0px;

            left: 0px;

            padding: 0 20px;

            width: 460px;

            font-size: 25px;

            height: 50px;

            line-height: 40px;

            outline: none;

        }

        .todoList>li:hover>.view .destroy{

            display: block;

        }

        .todoList>li>.view .destroy{

            float: right;

            width: 16px;

            height: 16px;

            margin-top: 12px;

            line-height: 16px;

            text-align: center;

            border-radius: 10px;

            background-color: #d1d1d1;

            color: white;

            font-size: 12px;

            display: none;

        }

        .todoList>li .destroy:hover{

            cursor: pointer;

            background-color: #b1b1b1;

        }

        .select label{

            text-decoration: line-through;

            color: #a1a1a1;

        }

        footer{

            background-color: #f4fce8;

            margin: 0 -20px;

            margin-bottom: -20px;

            margin-top: 20px;

            padding: 10px 20px 10px 20px;

            display: none;

            border-radius: 0 0 8px 8px;;

        }

        #clear-complete{

            float: right;

            font-size: 12px;

            padding: 2px 10px;

            border-radius: 10px;

            background-color: #d1d1d1;

        }

        #clear-complete:hover{

            cursor: pointer;

            background-color: #a1a1a1;

        }

    </style>

</head>

<body>

<div id="todo">

    <header>

        <h1>Todos</h1>

        <input type="text" id="new-todo" placeholder="What needs to be done?"/>

    </header>

    <section>

        <p><input type="checkbox" id="select-all"/><label for="select-all">Mark all as complete</label></p>

        <ul>

        </ul>

    </section>

    <footer></footer>

</div>



<script src="jquery-1.11.2.min.js"></script>

<script src="handlebars-v3.0.0.js"></script>

<script src="json2.js"></script>

<script src="underscore.js"></script>

<script src="backbone.js"></script>

<script type="text/x-handlebars-template" id="todo-template">

    <div>

        <input type="checkbox"{{#if done}} checked {{else}} '' {{/if}}/>

        <label for="">{{title}}</label>

        <a>X</a>

    </div>

    <input type="text" value="{{title}}"/>

</script>

<script type="text/x-handlebars-template" id="footer-template">

    {{#if done}}

    <a id="clear-complete">

        Clear <b>{{done}}</b> completed

    </a>

    {{/if}}

    <div id="todo-count">

        <strong>{{remaining}}</strong> items left

    </div>

</script>

<script>

    var Todo = Backbone.Model.extend({

        defaults: {

            title: "empty title",

            done: false

        },

        toggle: function(){

            this.set('done', !this.get('done'));

        }

    })

    var TodoS = Backbone.Collection.extend({

        model: Todo,

        done: function(){

            return this.where({done: true}).length;

        },

        initialize: function(){

        },

        remaining: function(){

            return this.where({done: false}).length;

        },

        destroyView: function(model){

            this.remove(model);

        }

    })

    var todoS = new TodoS;

    var TodoView = Backbone.View.extend({

        tagName: 'li',

        template: Handlebars.compile($('#todo-template').html()),

        initialize: function(){

            this.listenTo(this.model, 'change', this.render);

            this.listenTo(this.model, 'remove', this.destroyView);

        },

        events: {

            "click .toggle": "toggleDown",

            "click .destroy": "destroyView",

            "dblclick .view": "edit",

            "blur .edit": "saveEdit",

            "keypress .edit": "saveEdit"

        },

        render: function(){

            this.$el.html(this.template(this.model.toJSON()));

            if(this.model.get('done')){

                this.$el.addClass('select');

            }else{

                this.$el.removeClass('select');

            }

            return this;

        },

        toggleDown: function(){

            this.model.toggle();

        },

        destroyView: function(){

            this.remove();

            todoS.destroyView(this.model);

        },

        edit: function(){

            this.$('.edit').show();

            this.$('.edit').focus();

        },

        saveEdit: function(e){

            if(e.charCode == 13 || !e.charCode){

                this.model.set('title', this.$('.edit').val());

                this.$('.edit').hide();

            }

            if(this.$('.edit').val() == ""){

                todoS.remove(this.model);

            }

        }

    })

    var AppView = Backbone.View.extend({

        el: $('#todo'),

        footerTemplate: Handlebars.compile($('#footer-template').html()),

        initialize: function(){

            this.input = this.$("#new-todo");

            this.listenTo(todoS, 'add', this.addNewView);

            this.listenTo(todoS, 'all', this.render);

            this.footer = this.$('footer');

            this.views = this.$('.views');

            this.toggleAll = this.$('#select-all');

            this.firstRender();

        },

        events: {

            "keypress #new-todo": "createEnter",

            "click #select-all": "toggleAllComplete",

            "click #clear-complete": "removeSelect"

        },

        addNewView: function(model){

            var todoView = new TodoView({model: model});

            this.$('.todoList').append(todoView.render().$el)

        },

        render: function(){

            if(todoS.length){

                this.views.show();

                this.footer.html(this.footerTemplate({done: todoS.done(), remaining: todoS.remaining()}));

                this.footer.show();

            }else{

                this.views.hide();

                this.footer.hide();

            }

            var flag = true;

            todoS.each(function(model){

                if(!model.get('done')){

                    flag = false;

                }

            })

            this.toggleAll[0].checked = flag;

            localStorage.setItem('todoS', JSON.stringify(todoS));

        },

        createEnter: function(e){

            if(e.keyCode != 13) return 1;

            if(this.input.val()==null || this.input.val().match(/^\s*$/)) return 1;

            todoS.add({title: this.input.val()});

            this.input.val('');

        },

        toggleAllComplete: function(){

            var done = this.toggleAll[0].checked;

            todoS.each(function(model){

                model.set('done', done);

            })

        },

        removeSelect: function(){

            var len = todoS.models.length;

            while(len){

                if(todoS.models[len-1].get('done')){

                    todoS.destroyView(todoS.models[len-1]);

                }

                len--;

            }

        },

        firstRender: function(){

            var todoArr = JSON.parse(localStorage.getItem('todoS'));

            todoArr.forEach(function(todo){

                todoS.add(todo);

            })

            if(todoArr >= 1){

                todoArr.each(function(todo){

                    console.log(todo)

                    todoS.add(todo);

                })

            }

            console.log(todoS)

        }

    })

    var appView = new AppView;

</script>

</body>

</html>


© 著作权归作者所有

L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
【再探backbone 02】集合-Collection

前言 昨天我们一起学习了backbone的model,我个人对backbone的熟悉程度提高了,但是也发现一个严重的问题!!! 我平时压根没有用到model这块的东西,事实上我只用到了view,所以昨天学习的效...

范大脚脚
2017/11/16
0
0
寻找 TODOs:向开源项目贡献的一些建议

常常有人跟我讲他们想参与贡献开源项目,但是不懂如何入手。我这里有一些建议: git clone repository_url_of_some_open_source_project target_directory grep -RIn TODO target_directory/...

虫虫
2012/03/07
2.5K
15
backbone.js资料汇总

the5file的博客(都能执行,适合入门) http://www.the5fire.com/backbone-tutorials-catalogue.html backbone.js使用场景 http://www.zhihu.com/question/19720745 doc http://backbonejs.org......

flyking
2014/03/19
63
0
【再探backbone 01】模型-Model

前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由的...

范大脚脚
2017/11/02
0
0
MVC与Backbone.js的demo简析

MVC简介 MVC是一种软件设计模式,它将应用程序分为Model、View、Controller三个部件,可以有效地将业务逻辑和数据显示分离。 Model包括算法实现、数据管理和数据库设计等。Model与数据格式无...

wsd1
2013/10/07
982
0

没有更多内容

加载失败,请刷新页面

加载更多

崛起于Springboot2.X之5分钟解决单点登陆(53)

SpringBoot2.X心法总纲 1、pom文件依赖 <dependency> <groupId>com.majiaxueyuan</groupId> <artifactId>sso-core</artifactId> <version>1.2.2</version></dependency> 2、......

木九天
11分钟前
11
0
面向对象和面向过程的区别

面向过程 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发,性能是最重要的因素。 缺点:没有面向对...

无名氏的程序员
13分钟前
8
0
OpenStack大事记

2010年7月19日,Rackspace、NASA、Citrix、Dell共同开发并发布OpenStack第一个版本。 2011年10月,Rackspace放弃OpenStack控制权,交由一新成立的OpenStack基金会管理。 2012年5月NASA宣布退...

大别阿郎
13分钟前
4
0
面向对象的简单应用—以交通工具(Vehicle)为列

请定义一个交通工具(Vehicle)的类其中有: 属性: 速度(speed)、 体积(size)等,方法:移动(move())、设置速度(setSpeed(int speed))、加速 speedUp()、减速 speedDown()等。最后在测试类 Ve...

INEVITABLE
24分钟前
4
0
通往艺术家之路

通往艺术家之路 并发编程中,开发者往往需要权衡锁的颗粒粗细,锁住的代码块太大呢会导致可能的线程堵塞,锁的颗粒太细呢又会因为频繁地加锁解锁导致系统用户态内核态的转换从而消费很多时间...

StupidZhe
25分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部