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是不是挺好理解的................

  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/ajun/p/4668986.html
Copyright © 2011-2022 走看看