前言：

　　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. 使用h5的history改善ajax列表请求体验

    信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器“后退”和“ ...

  2. Asp.Net Core 项目实战之权限管理系统（2） 功能及实体设计

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  3. Redis简单案例(三) 连续登陆活动的简单实现

    连续登陆活动,或许大家都不会陌生,简单理解就是用户连续登陆了多少天之后,系统就会送一些礼品给相应的用户.最常见的 莫过于游戏和商城这些.游戏就送游戏币之类的东西,商城就送一些礼券.正值国庆,应该也有不 ...

  4. .NET正则表达式基础入门（四）

    断言 判断某个位置左侧或者右侧是否符合匹配.常见断言有三种,单词边界.行起始/结束位置.环视.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.单词边界 正则表达式&qu ...

  5. 严重: Exception sending context initialized event to listener instance of class

    问题描述:Exception sending context initialized event to listener instance of class org.springframework.w ...

  6. php实现设计模式之 模板方法模式

    <?php /** * 模板模式 * * 定义一个操作中的算法骨架,而将一些步骤延迟到子类中,使得子类可以不改变一个算法的结构可以定义该算法的某些特定步骤 * */ abstract class ...

  7. 来玩Play框架01 简介

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 说到网络框架,Ruby的Ruby on Rail和Python的Django都相当 ...

  8. CSS3写折纸

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. SalesForce 记录级别安全性

    对象级安全性 简档 对象级安全性提供了控制 Salesforce.com 中数据的最简单方式.使用对象级安全性 您可以防止用户查看.创 建.编辑或删除特殊类型对象的任何实例 如潜在客户或业务机会.对象 ...

  10. 使用WebRTC搭建前端视频聊天室——点对点通信篇

    WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...