<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

  <script src="lib/jquery-latest.js"></script>

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

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

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

</head>

<body>

    <style>

        span{display: block;}

    </style>

    <p id="app"></p>

    <button id="btn">Click</button>

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

</body>

</html>

js:

var DemoModel = Backbone.Model.extend({

    defaults: {

        name: "King-fly",

        age: 23

    }

});

var DemoCollection = Backbone.Collection.extend({

    model: DemoModel,

    localStorage: new Backbone.LocalStorage("Demotodo"),

    initialize: function() {

        this.on("add", this.triAdd);

    },

    triAdd: function() {

        console.log("DemoCollection add method");

    },

    done: function(name) {

        return this.where({name: name})

    }

});

var demoCollection = new DemoCollection;

var SpanView = Backbone.View.extend({

    tagName: "span",

    initialize: function() {

        this.render();

        this.$el.bind("click",this.clear);

        this.listenTo(this.model, "destroy", this.remove)

    },

    render: function() {

        this.$el.html(_.template("My name is <%= name %>,my age is <%= age %>", this.model.toJSON()));

        return this;

    },

    clear: function() {

        this.remove();

        console.dir(this);

    }

});

var DemoView = Backbone.View.extend({

    el: "body",

    counter: 0,

    events: {

        "click button#btn": "btnClick",

        "click button#clear": "clearData"

    },

    initialize: function() {

        this.listenTo(demoCollection, "add", this.addOne);

        // this.listenTo(demoCollection, "")

        demoCollection.fetch();

    },

    clearData: function() {

        _.invoke(demoCollection.done("Wuhan"), "destroy");

    },

    render: function() {

    },

    btnClick: function() {

        demoCollection.create({name: "Wuhan", age: 23 + this.counter++});

    },

    addOne: function(demoModel) {

        var view = new SpanView({model: demoModel})

        $("#app").append(view.render().el);

    },

    addAll: function() {

        demoCollection.each(this.addOne, this);

    }

})

var demoView = new DemoView();

Backbone 应用的关键点是要理清需求的流程，每个View 层的操作对象都有自己的执行逻辑， 理解各View层之间的关系对处理Model层来说至关重要。而作为数据的操作层Collection来说，起相关联数据所展现的复杂度随着view层的增加不断增加。因此控制好collection层显得至关重要。

由于Backbone 是基于Underscore库为基础的，作为函数库的underscore需要更深层次的了解。

Backbone Backbone-localStorage demo的更多相关文章

  1. HTML5 LocalStorage Demo

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. [backbone]backbone.js

    学习文档: 开始学习 Backbone http://www.ibm.com/developerworks/cn/web/wa-backbonejs/

  3. (转)初探Backbone

    (转)http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html 初探Backbone 前言 Backbone简介 模型 模型和 ...

  4. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一

    Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...

  5. Django+Tastypie作后端，Backbone作前端的TodoMVC

    TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...

  6. 初探Backbone

    Backbone简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ B ...

  7. [转]backbone.js 初探

    本文转自:http://weakfi.iteye.com/blog/1391990 什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架. 主要提供了 ...

  8. requirejs、backbone.js配置

    requirejs初探 参考资料官网:http://requirejs.org中文译文:http://makingmobile.org/docs/tools/requirejs-api-zh reuq ...

  9. undercore & Backbone对AMD的支持（Require.js中如何使用undercore & Backbone）

    RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...

  10. Backbone实例todos分析

    源码来自:http://todomvc.com/examples/backbone/ 这是一个用Backbone.js完成的待办事项实例,精简但完善,可以帮助很好的帮助理解Backbone的API,M ...

随机推荐

  1. [转载]char * 和char []的区别---之第一篇

    char *  和char []的区别---之第一篇 原文地址http://blog.csdn.net/yahohi/article/details/7427724 在C/C++中,指针和数组在很多地 ...

  2. C#读书笔记之并行任务

    这两天遇到一个多线程任务优化的问题,现在解决了,把心得用例子的形式记下来. 假设有四个任务: 任务1:登陆验证(CheckUser) 任务2:验证成功后从Web服务获取数据(GetDataFromWe ...

  3. 【BZOJ】【1059】【ZJOI2007】矩阵游戏

    二分图完美匹配/匈牙利算法 如果a[i][j]为黑点,我们就连边 i->j ,然后跑二分图最大匹配,看是否有完美匹配. <_<我们先考虑行变换:对于第 i 行,如果它第 j 位是黑点 ...

  4. PS4 Razor GPU

    这东西,从出来就感觉没用,各种请教也都没有帮助.虽然搞明白了 rt啊tex啊buffer啊但是就是感觉对于抓bug没有用处.所以从来都是像巫师一样靠直觉,再用科学的方法来测试,其实就是让ps retu ...

  5. php中==与===区别

    ==是不判断二者是否是同一数据类型,而===是更为严格的比较,它不但要求二者值相等,而且还要求它们的数据类型也相同

  6. Codeforces 322B

    B. Ciel and Flowers time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. 异步等待的 Python 协程

    现在 Python 已经支持用协程进行异步处理.但最近有建议称添加协程以全面完善 Python 的语言结构,而不是像现在这样把他们作为生成器的一个类型.此外,两个新的关键字---异步(async)和等 ...

  8. 【C++】指针数组和数组指针

    首先的首先,稍微抱怨一下阿里今天的严重失误.说好的晚六点笔试,说好的务必提前半小时到场.六点十五的时候告诉闷在一个大教室里躁动的我们“今天七点半开考,大家先回去吧,七点半再过来”,满脸黑线…等到七点半 ...

  9. Runtime的用法

    public class RuntimeTest { public static void main(String[] args) { Runtime run =Runtime.getRuntime( ...

  10. 服务接口API限流 Rate Limit 续

    一.前言 上一篇文章中粗浅的介绍使用Redis和基于令牌桶算法进行对服务接口API限流,本文介绍另一种算法---漏桶算法的应用.Nginx想必大家都有所了解是一个高性能的 HTTP 和反向代理服务器, ...