Backbone.js入門教程第二版筆記（1）

時間 2019-11-11

標籤 backbone.js backbone 入門教程第二筆記欄目 JavaScript 简体版

原文原文鏈接

一、模塊集合視圖和事件的一個綜合例子php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.1.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>

</head>
<body>
    <button id="check">新手報到</button>
    <ul id="world-list">
    </ul>
    <script>
    (function ($) {

        var World=Backbone.Model.extend({
            name:null //爲何要建立一個空的name
        });

        var Worlds=Backbone.Collection.extend({
            initialize:function(models,options){
                this.on("add", options.view.addOneWorld);//初始化綁定add方法
            }
        });

        var  AppView=Backbone.View.extend({
            el:$('body'),//指定關聯的元素
            initialize:function(){//初始化方法
                this.worlds=new Worlds(null,{view:this})//實例化一個集合，而且建一個屬性view用來保存視圖
            },
            events:{
                'click #check':"checkIn"//綁定#check的click事件
            },
            checkIn:function(){
                var world_name=prompt("請問，您是哪星人?");
                world_name||(world_name = '未知');

                var world=new World({name:world_name});//實例化一個模塊，並設置name的值
                this.worlds.add(world);//將模塊添加到集合
            },
            addOneWorld:function(model){
                $("#world-list").append("<li>這裏是來自 <b>" + model.get('name') + "</b> 星球的問候</li>");
            }
        });
        var appview = new AppView;//實例化AppView

    })(jQuery);
    </script>
</body>
</html>

二、爲對象添加驗證規則與錯誤提示html

var User=Backbone.Model.extend({
    defaults:{
        name:'susan',
        age:18
    },
    url:"1.html",//須要設置url，由於save會調用sync方法把數據提交到服務器
    initialize:function(){
        this.on("invalid",function(model,error){//初始化時綁定驗證未經過時的事件處理函數
            console.log(error);
        });
    },
    validate:function(attributes){//重寫驗證方法 不返回或返回falsy值（假值）時不會觸發invalid?
        if(attributes.name==""){
            return "name 不能爲空！";
        }
    }
});
var user=new User();
user.set("name","");
user.save();//當save時會觸發validate方法

3 根目錄 urlRootjquery

var Book = Backbone.Model.extend({
    urlRoot:'/backbone_test',
    defaults:{"name":"Su","age":14}
});

var solaris = new Book({id: "data.php"});

console.log(solaris.url());///backbone_test/data.php 

solaris.save();

4 使用fetch從服務端獲取數據（collection中並無urlRoot屬性）json

var Book = Backbone.Model.extend({//建立一個Model
    defaults : {
        title:'default'
    }
});

var BookShelf = Backbone.Collection.extend({//建立一個集合
    model : Book,
    url:'user.json'
});

var book1 = new Book({title : 'book1'});//實例化二個model
var book2 = new Book({title : 'book2'});

var bookShelf = new BookShelf([book1, book2]); //實例化集合，並將這2個model添加到集合中，也能夠使用collection.add(model)添加。


// bookShelf.url = 'user.json'; //或者在這裏添加url
bookShelf.fetch({
    success:function(collection, response, options){
        collection.each(function(book){
            console.log(book.get('title'));//default
        });
    },error:function(collection, response, options){
        console.log('error');
    }
});

6 create方法發送數據到服務端服務器

var NewBooks = Backbone.Collection.extend({
    model: Book,
    url: '/books/'
});

var books = new NewBooks;

var onebook = books.create({
    title: "I'm coming",
});

create方法會在內部調用save方法，而save方法前面提過它會調用sync把數據提交到服務器。看源碼也能夠知道，create方法最後返回了建立的model實例app