Backbone.js应用基础

JQ实验室

发布于 2022-02-09 16:44:01

6320

发布于 2022-02-09 16:44:01

前言：

　　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:10,
        score:100
    },
    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',20);
//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>

　　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方法类似；

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-11-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

underscore