前言：

　　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. Oracle 中的操作符

    1.union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: SELECT * FROM emp WHERE sal < UNION SELECT * FROM emp WH ...

  2. WPF入门:XAML

    XAML是WPF技术中专门用于设计UI的语言 XAML优点最大的优点是将UI与逻辑代码剥离 创建第一个WPF应用程序 VS默认生成的WPF项目解决方案 Properties:里面主要包含了程序用到的一 ...

  3. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  4. ubuntu安装navicat及常见问题解决

    1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...

  5. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  6. 使用python处理子域名爆破工具subdomainsbrute结果txt

    近期学习了一段时间python,结合自己的安全从业经验,越来越感觉到安全测试是一个体力活.如果没有良好的coding能力去自动化的话,无疑会把安全测试效率变得很低. 作为安全测试而言,第一步往往要通过 ...

  7. SQLSERVER 2012 收缩日志

    select log_reuse_wait_desc from sys.databases where name='tfs_CARDLANWEB' backup log tfs_CARDLANWEB ...

  8. ASP.NET Cookie（一）－－基本应用

    Cookie提供了一种在Web应用程序中存储用户特定信息的方法.例如,当用户访问您的站点时,您可以使用Cookie存储用户首选项或其他信息.当该用户再次访问您的网站时,应用程序便可以检索以前存储的信息 ...

  9. 树莓派 连接wifi与路由器ip绑定

    先推荐几个手机软件 在酷安网里应该能找到 1.JuiceSSH  橘子ssh软件  手机连上路由器 就可以控制局域网内的树莓派 2.VNC Viewer  远程桌面软件VNC 也是连接局域网的树莓派 ...

  10. python 发送邮件

    # coding=utf-8 import smtplibfrom time import sleepfrom email.mime.text import MIMETextfrom email.mi ...