zoukankan      html  css  js  c++  java
  • Backbone.js应用基础

    前言:

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

      

       

  • 相关阅读:
    vue hover如何触发事件?
    防止 window.open 被拦截
    input输入框change和blur事件区别
    神马?使用JS直接上传并预览粘贴板的图片?
    删除设备与驱动器中百度网盘图标
    枚举类字典代码 草稿
    中文转换成阿拉伯数字
    Java对象与类中的一个小练习
    正向代理和反向代理
    MySQL教程126-MySQL事务隔离级别
  • 原文地址:https://www.cnblogs.com/liangblog/p/6113294.html
Copyright © 2011-2022 走看看