集Backbone,Mustache,Bootstrap,JQuery于一身的DEMO--Cool Note

这里展示的是一个集合了Backbone,Mustache,Bootstrap,JQuery的DEMO

首先介绍一下这几个Lib

Backbone

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

在我看来Backbone是用于构建重量级Web应用的一个MVC框架

Mustache

Mustache can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values. This document explains the different types of Mustache tags.

在我看来Mustache是一个非常轻量级和完备的模板引擎

Bootstrap

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

在我看来Bootstrap是我这些不会玩排版和样式的人的福音

JQuery就不再这里赘述了.

这些个东西混杂在一起,就搞出了Cool Note,先来个图让大家看看

代码很简短,接下来我们一个个的说明:

Note是这个Cool Note的基础Model,包含了'title','content'两个属性,并且有两个对应的缩短方法,缩短方法主要用于Mustache的渲染使用

var Note = Backbone.Model.extend({
    defaults: function() {
        return {
            title : '',
            content : '',
            short_title : function(){
                if(this.title.length > 5){
                    return this.title.substr(0,5)+'...';
                }else{
                    return this.title;
                }
            },
            short_content : function(){
                if(this.content.length > 80){
                    return this.content.substr(0,80)+'...';
                }else{
                    return this.content;
                }
            }
        };
    }
});

Notes是Note的集合,并声明的存储方式为本地存储

var NoteList = Backbone.Collection.extend({
    model: Note,
    localStorage: new Store("notes")
});

var Notes = new NoteList;

NoteView是Note的View,用于渲染Note和处理一些事件

var NoteView = Backbone.View.extend({
    tagName :  "div",
    className : "span4 well",
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
    },
    template : function(note){
        var template = '<a class="close" title="删除" href="javascript:void(0);">×</a><div class="note"><h2 rel="twipsy" data-original-title="{{title}}">{{short_title}}</h2><p data-placement="below" rel="twipsy" data-original-title="{{content}}">{{short_content}}</p></div>';
        return Mustache.to_html(template, note);
    },
    render : function(){
        $(this.el).html(this.template(this.model.toJSON()));
        $(':[rel="twipsy"]',this.el).twipsy({live: true});
        return this;
    },
    events: {
        'click .close' : 'clear',
        'click .note' : 'modify'
    },
    remove: function() {
        $(this.el).remove();
    },
    clear : function(){
        this.model.destroy();
    },
    modify : function(){
        new NoteModifyView({model:this.model});
    }
});

NoteModifyView则是新建和修改Note时的View

var NoteModifyView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    className:'modal hide fade',
    events: {
        'hidden' : 'remove',
        'click :submit' : 'submit',
        'click :reset' : 'cancel'
    },
    template : function(note){
        var template = '<div class="modal-header"><a href="#" class="close">×</a><h3>笔记</h3></div><div class="modal-body"><form class="span7"><fieldset><div class="clearfix" _type="title"><label for="title" _type="title">标题</label><div class="input"><input name="title" _type="title" size="30" type="text" value="{{title}}" /></div></div><div class="clearfix" _type="content"><label for="content" _type="content">内容</label><div class="input"><textarea class="xlarge" name="content" _type="content" rows="6">{{content}}</textarea></div></div></fieldset></form></div><div class="modal-footer"><input type="submit" class="btn primary" value="保存">  <button type="reset" class="btn">取消</button></div>';
        return Mustache.to_html(template, note);
    },
    render : function(){
        $(this.el).html(this.template(typeof(this.model) != 'undefined' ? this.model.toJSON() : {} )).modal({
            keyboard : true,
            show : true,
            backdrop : 'static'
        }).appendTo($('body'));

        return this;
    },
    remove : function(event) {
        event.stopPropagation();
        $(this.el).remove();
    },
    submit : function() {
        var title = $(':[name="title"]',this.el).val();
        var content = $(':[name="content"]',this.el).val();
        if(title && content){
            if(this.model){
                this.model.save({title:title,content:content});
            }
            else{
                Notes.create({title:title,content:content});
            }
            $(this.el).modal('hide');
        }
        else{
            if(!title){
                $(':[_type="title"]',this.el).addClass('error');
            }
            else{
                $(':[_type="title"]',this.el).removeClass('error');
            }

            if(!content){
                $(':[_type="content"]',this.el).addClass('error');
            }
            else{
                $(':[_type="content"]',this.el).removeClass('error');
            }
        }
    },
    cancel : function(){
        $(this.el).modal('hide');
    }
});

AppView则是整个应用的View

var AppView = Backbone.View.extend({
    el : $("#noteapp"),
    events : {
        "click .add_note a":  "addNote"
    },
    initialize : function() {
        Notes.bind('add',   this.addOne, this);
        Notes.bind('reset', this.addAll, this);
        Notes.bind('all',   this.render, this);
        Notes.fetch();
    },
    addOne : function(note){
        var view = new NoteView({model: note});
        $("#noteapp .well").first().after(view.render().el);
    },
    addAll : function() {
        Notes.each(this.addOne);
    },
    addNote : function(){
        new NoteModifyView();
    }
});

new AppView();

这个应用是参照了Backbone上的一个DEMO而写的

整体感觉Backbone很适合用于构造复杂的Web应用