前言：

　　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. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  2. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. ETL数据从sqlserver到mysql之间迁移

    因近期需要进行sqlserver数据到mysql之间的数据同步.偶然之间发现了这一款工具ELK 一.下载 1.Kettle可以在http://kettle.pentaho.org/网站下载 2.下载的 ...

  4. CLR和.Net对象生存周期

    标签:GC .Net C# CLR 前言 1. 基础概念明晰 * 1.1 公告语言运行时 * 1.2 托管模块 * 1.3 对象和类型 * 1.4 垃圾回收器 2. 垃圾回收模型 * 2.1 为什么需 ...

  5. Navisworks Addin 插件集成

    调用Navisworks的 Api . 我这里是基于.NET 开发的. 我主要是尝试着获取一下工程量的API.不过还在研究. 插件的启动入口. //插件描述 [PluginAttribute(&quo ...

  6. Swing布局管理器介绍

    创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zhangjunhd.blog.51cto.com/113473/128174 当选 ...

  7. 5分钟创建一个SpringBoot + Themeleaf的HelloWord应用

    第一步:用IDE创建一个普通maven工程,我用的eclipse. 第二步:修改pom.xml,加入支持SpringBoot和Themeleaf的依赖,文件内容如下: <?xml version ...

  8. 使用visualvm远程监控JVM LINUX服务器配置方法

    (1)首先要修改JDK中JMX服务的配置文件,以获得相应的权限: 进入$JAVA_HOME所在的根目录的/jre/lib/management子目录下, a. 将jmxremote.password. ...

  9. 5.6 JS中基本包装类型

    为了便于操作基本类型值,ES还提供了三种特殊的引用类型,即(基本包装类型):Number,String,Boolean.这三种类型与前面介绍的引用类型相似,但同时也拥有基本数据类型的一些特性. 平时经 ...

  10. BCS 字段显示格式化

    技术部分 1.使用SPD添加外部数据源时保证,安装SPD的客户机在同一个域中,并且在管理中心给Business Data Connectivity Service 授权   2.生成的外部数据没法再后 ...