zoukankan      html  css  js  c++  java
  • Backbone之旅——Model篇

    Backbone作为前端的MVC框架,把后端的设计思想带到前端,使前端代码更加清晰、可维护性大大提高

    Backbone依赖于underscore.js和jquery,所以在使用backbone的时候一定要引入这两个常用的js库,jquery应该算是web前端的标配了吧,undersocre也是一个很通用的库,在nodejs中同样也使用。此处有个坑,三个js库的引用是有顺序的,jquery、underscore、backbone一定要按照这个顺序,并且所有的js要放到body的后面也就是页面的底部

    Backbone主要有4部分组成,Model、View、Collections和Router

    Model:很明显数据模型

    View:展示页面

    Collections:装载Model对象的集合

    Router:前端路由,这个在实现单页应用的时候非常实用,很好的控制页面的跳转和返回

    接下来学习Model

    定义一个简单的model

    var Person = Backbone.Model.extend({

      url:"/tt/save",

      initialize: function(){

        console.log("create person model");

        this.bind("invalid", function(model, error){

          if(error){

            console.log(error);

          }

          });

               this.bind("change:name", function(){

          var name = this.get("name");
          console.log("你改变了name属性: " + name);

                });

      },

      defaults:{

                name:null

          },

      validate: function(attributes){

         if(attributes.name === ""){

           return "name不能为空";  

         }

          }

    });

    var person = new Person;//实例化一个person对象,这样就完成了一个简单Model对象

    //initialize:就是构造函数

    //defaults:对形默认的属性,同样可以使用person.set({});进行赋值

    //validate:就是对模型的属性进行验证,但是一定要监听invalid,并且只有在model执行save的时候才能被触发,但是如果要再set的时候执行的话,那么需要

                    person.set({}, {"validate": true});这样就手动触发了,在执行set的是触发

    //change:这个会知道model的属性被set改变时触发,

    //url:这个就牛逼了,Model在执行save的时候会和服务器进行数据交换,是通过Backbone.sync来实现的,其实就是jquery的ajax,主要是集中请求方式的对应,

              create、update、read、delete,会对应到http请求的post、put、get、delete,所以这个地方是需要用到restful格式的api(这个自己慢慢看吧),

              在model中配置了url,默认的save,在没有初始化属性的model时触发的是create(post),若存在初始化属性则触发的是update(put),这就需要在后端配置路由的时候注意了

    person.save();//则会触发create,若存在model则触发update,

    使用fetch来自定义请求,只不过fetch触发的是read

    person.fetch({

      url:"/tt/man",

      success:function(model, res){},

      error: function(){

        console.log("error");

      }

    });

    model是不是挺好理解的................

  • 相关阅读:
    使用Python从Workflowy同步大纲到印象笔记
    使用Jenkins自动部署博客
    使用有限状态机原理实现英文分词
    TeamFlowy——结合Teambition与Workflowy提高生产力
    技巧收集-M1709
    Tenacity——Exception Retry 从此无比简单
    记住 Python 变量类型的三种方式
    Python 装饰器装饰类中的方法
    技巧收集-W1701
    DotnetSpider爬虫简单示例 net core
  • 原文地址:https://www.cnblogs.com/ajun/p/4668986.html
Copyright © 2011-2022 走看看