前言：

　　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. PhpStorm集成xdebug进行断点调试

    本文介绍如何使用PhpStorm集成xdebug在本地开发环境进行断点调试的技巧. 我配置的环境是:Windows10 + PhpStorm10.0.1 + PHP5.6. 1. 下载xdebug的扩 ...

  2. 《JavaScript 代码优化指南》

      ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...

  3. Redis高可用集群方案——哨兵

    本篇文章版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文系列地址http://www.cnblogs.com/tdws/tag/NoSql/ 本人之前有篇文章,讲到了redis主从复制,读写分 ...

  4. 推荐几篇关于EF的好文章

    文章作者 Julie Lerman 是 Microsoft MVP..NET 导师和顾问,住在佛蒙特州的山区.您可以在全球的用户组和会议中看到她对数据访问和其他 .NET 主题的演示.她的博客地址是 ...

  5. sql 修改字段默认值

    1.查出该字段的约束名称 SELECT c.name FROM sysconstraints a INNER JOIN syscolumns b on a.colid=b.colid INNER JO ...

  6. 【Spring】SpringMVC中浅析Date类型数据的传递

    在控制器中加入如下代码: @InitBinder public void initBinder(ServletRequestDataBinder bin){ SimpleDateFormat sdf ...

  7. php简单实现socket通信

    socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. Android自定义ViewGroup

    视图分类就两类,View和ViewGroup.ViewGroup是View的子类,ViewGroup可以包含所有的View(包括ViewGroup),View只能自我描绘,不能包含其他View. 然而 ...

  10. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...