Backbone.js應用基礎

時間 2019-11-18

標籤 backbone.js backbone 應用基礎欄目 JavaScript 简体版

原文原文鏈接

前言：javascript

　　Backbone.js是一款JavaScript MVC應用框架，強制依賴於一個實用型js庫underscore.js,非強制依賴於jquery；其主要組件有模型，視圖，集合，路由；與後臺的交互主要是經過Restful JSON 進行數據傳輸；java

基礎Backbone.js知識：jquery

　　一、引入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>

　　二、新建M.V.C:數據結構

　　　　Model對象表示數據模型，用於定義數據結構； View用於數據展現，綁定DOM事件和處理頁面邏輯， Collection是管理數據模型的集合，用於查找或保存數據；mvc

<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>

mvc

　　三、導航控制器(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>