前言：

　　Backbone.js是一款JavaScript MVC应用框架，强制依赖于一个实用型js库underscore.js,非强制依赖于jquery；其主要组件有模型，视图，集合，路由；与后台的交互主要是通过Restful JSON 进行数据传输；

基础Backbone.js知识：

　　1、引入js文件：如果依赖于第三方类库如jquery，则最好先引入；之后引入underscore.js 这是必须引入且在引入backbone.js之前，其引入文档结构如下：

<head>

<meta charset="UTF-8">

<title>Backbone</title>

<script src="3rd/jquery1.9.1.min.js"></script>

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

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

</head>

　　2、新建M.V.C:

　　　　Model对象表示数据模型，用于定义数据结构； View用于数据展示，绑定DOM事件和处理页面逻辑， Collection是管理数据模型的集合，用于查找或保存数据；

<script type="text/javascript">

//M 模型

var person = Backbone.Model.extend({

    defaults:{

        name:'default',

        age:,

        score:

    },

    initialize:function(){

        this.on('change:age',function(){

            var oa = this.previous('age');

            var a = this.get('age');

            //console.log(a+'==='+oa);

        });

    },

    myFun: function(){

        //自定义事件

        console.log(this.get('score'));

        console.log(this.get('name'));

        console.log(this.get('age'));

    }

});

var man = new person();

man.set('age',);

//man.myFun();

//console.log(man.attributes['score']);

//C 集合

var persons = [{},{}]

var people = new Backbone.Collection(persons,{

    model:person

});

//V 视图

var diview = Backbone.View.extend({

    el:'#backview',

    render:function(content){

        this.el.innerHTML = content;

    }

});

var test = new diview();

test.render('终于见到了.....');

</script>

mvc

　　3、导航控制器(router--路由):

<script type="text/javascript">

    var myrouter = Backbone.Router.extend({

        routes:{

            '':'defaut',

            'list':'list'

            'show/:name','show'

        },

        defaut:function(){

        },

        list:function(){

        },

        show:function(name){

        }

    });

    var t_router = new myrouter();

    Backbone.history.start();

</script>

　　4、与服务器交互的模型对象：

　　　调用模型对象的save方法是发送POST新建或PUT修改请求；fetch是调用GET方法；destroy方法是使用delete请求方式向服务器发送对象的id，服务器做删除记录操作；

　　　模型对象集合提供了fetch和create两个方法与服务器进行交互；create方法与以上save方法类似；

　　

　　　

Backbone.js应用基础的更多相关文章

  1. Backbone.js学习之View

    千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. 我对Backbone.js的一些认识

    backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术 ...

  4. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  5. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  6. Backbone.js入门教程

    原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...

  7. 使用backbone.js、zepto.js和trigger.io开发HTML5 App

    为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个 ...

  8. [backbone] Getting Started with Backbone.js

    一.简介 Backbone 是一个 JavaScript MVC 框架,它属于轻量级框架,且易于学习掌握.模型.视图.集合和路由器从不同的层面划分了应用程序,并负责处理几种特定事件.处理 Ajax 应 ...

  9. Backbone.js 使用模板

    实际的应用中会使用到模板,Model 等,而模板又是进阶的基础.所以这里介绍在 View 中使用模板,以及如何向模板填充值,模板可以用字符串,或是用 <script type="tex ...

随机推荐

  1. asp.net MVC5 学习笔记(一)

    Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法,默认控 ...

  2. EF里单个实体的增查改删以及主从表关联数据的各种增删 改查

    本文目录 EF对单个实体的增查改删 增加单个实体 查询单个实体 修改单个实体 删除单个实体 EF里主从表关联数据的各种增删改查 增加(增加从表数据.增加主从表数据) 查询(根据主表找从表数据.根据从表 ...

  3. CentOS系统配置 iptables防火墙

    阿里云CentOS系统配置iptables防火墙   虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FO ...

  4. VS2010中dumpbin工具的使用

    用VS2010生成的.obj文件..lib库..dll库..exe执行文件,如果想查看其中这些文件或库包含了哪些函数以及相关的信息(符号清单),可以通过VS2010自带的dumpbin工具来完成. d ...

  5. Linux文件管理命令笔记

    more\less:翻页命令 more:翻页的形式查看文件内容.该命令可作为管道命令. 翻页过程可使用的键: 空格(space):向下翻页: 回车(Enter):向下翻一行: b:往回翻,只限,但管道 ...

  6. 自己实现一个简易web服务器

    一个web服务器是网络应用中最基础的环节. 构建需要理解三个内容: 1.http协议 2.socket类 3.服务端实现原理 1.1 HTTP http请求 一般一个http请求包括以下三个部分: 1 ...

  7. webView 自适应高度 document.body 属性

    前段时间开发遇到webView 高度自适应问题,用最初的方法无效,找了些资料,记录下. 1.若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  8. html5页面结构

    我是html5初学者,最近闲来无事,和各位一起学些下html5. 开发环境 jdk1.6,tomcat6,开发工具eclipse. 新建一个web工程,创建一个index.jsp页面.页面代码如下. ...

  9. 如何评价一个RPC框架的性能

    协议:数据传输的格式,通信双方的契约.   传输:使用何种传输通道传输数据.   线程:接收到数据,如何分发数据进行处理.

  10. Linux运维之基础拾遗

    第一部分 Linux常用文件管理命令 1.1 cp 文件复制 常用选项 -i # 覆盖之前提醒用户确认 -f # 强制覆盖目标文件 -r # 递归复制目录 -d # 复制符号链接本身而非其指向的源文件 ...