《backbone.js》学习笔记

第一章  理解Backbone

一、概念

　　Backbone.js是一套基于（模型－视图－控制器 MVC）模式的轻量级的javascript框架。

二、使用MVC模式设计应用

1、模型：应用程序运行所需要的数据和业务逻辑.

2、视图：负责把模型展示给用户.

3、控制器：负责响应用户的输入，更新模型和视图.

简单术语翻译对照：散列表（hash）、 模型（model）、 视图（view） 、集合（collection）、 回调函数（callback）、 绑定（bind）

 

三、下载和依赖

　　Backbone.js 唯一重度依赖 Underscore.js.

　　对于 RESTful , history 的支持依赖于 Backbone.Router ,

　　DOM 处理依赖于 Backbone.View , json2.js, 和 jQuery ( > 1.4.2) 或 Zepto 之一.

 

四、API参考

　　http://www.css88.com/doc/backbone/#Events-bind　　　　中文文档

　　http://www.the5fire.com/the5fire-mobile-site-base-on-backbonejs.html　　　　实例

 

第二章  模型

一、创建一个模型

　　模型负责存放应用于所需的数据、对数据进验证、执行访问控制以及实现所需特定的业务逻辑，可以通过Backbone.Model对象的方式来定义一个模型.

<script>
    var sModel = Backbone.Model.extend({         // 创建一个模型

    })

    var newModel = new sModel({             // 实例化模型，并设置初始值
        lastNumber: "04,04,04",
        closeTime: "2014-12-01 15:52:09",
        "status": "55",
        "issue": "141201037"
    });

    $("#sidebar").html(newModel.get("lastNumber"));
</script>

// 或者可以写成

<script>
    var sModel = Backbone.Model.extend({
        default:{
            lastNumber: "04,04,04",
            closeTime: "2014-12-01 15:52:09",
            "status": "55",
            "issue": "141201037"
        }
    })
    var newModel = new sModel();

    $("#sidebar").html(newModel.get("lastNumber"));
</script>

 

可以将模版写在<script>中

<script type="text/template" id="post-list-template">
    <a href="#post/<%= id %>">
        <div class="line">
            <%= title %>
            <div class="row small-font">
                <div class="span">分类:<%= category %></div>
                <div class="span">发布于:<%= create_time %></div>
            </div>
        </div>
    </a>
</script>

<script>
    var PostView = Backbone.View.extend({
        tagName:  "dl",
        listTemplate: _.template($('#post-list-template').html())           // _.template方法是underscore.js框架中的方法
    })
</script>

 

 

二、Model下的方法

1、extend()：扩展Backbon.Model的方法

2、clone() 复制模型

　　var newModel = itemModel.clone();

 

3、isNew() ：模型是否保存到了服务器中，如果模型无id视为新模型 itemMode.isNew();

4、change()：手动触发change()事件

3、default：设置默认的属性值

var InvoiceItemModel = Backbone.Model.extend({
    default:{
        date: "",
        description: "",
        price: 0,
        quantity: 1
    }
})

 

4、attributes 属性：也是修改模型属性所用，建议使用set()方法

 

三、模型属性的操作

1、get()方法来获取属性的值

　　var quantity = itemModel.get("quantity"); // 如果不存在返回undefined

 

2、set()方法来更新、创建单个属性的值

itemModel.set("quantity", 5); // 单个更新，如果通过验证返回true，否则返回false

itemModel.set({ // 多个更新
    quantity: 10,
    price: 10
})

 

3、unset()删除模型中删除一个属性

　　itemModel.unset("quantity"); // 删除一个属性

 

4、clear()删除模型中所有的属性

　　itemModel.clear();

 

5、has()用来检查模型中是否有某一属性

　　if(!itemModel.has("quantity")){
　　　　console.log("模型中有此属性");
　　}

 

6、escape()获得HTML转义后的属性

var hacker = new Backbone.Model({
　　name : "<script>alert('xss')<\/script>"
})

var escaped_name = hacker.escape("name"); // 将转义成&lt;script&gt;alert(&#x27;xss&#x27;)&lt;&#x2f;script&gt

 

7、url()：返回模型资源在服务器上位置的相对 URL 。 如果模型放在其它地方，可通过合理的逻辑重载该方法

 

8、urlRoot 集合外部的模型，通过指定 urlRoot 来设置生成基于模型 id 的 URLs 的默认 url 函数

var Book = Backbone.Model.extend({urlRoot : '/books'});
var solaris = new Book({id: "1083-lem-solaris"});
alert(solaris.url())

 

四、模型的标识符操作

每个模型都有一个ID属性，来在不同杠间进行区分

1、设置id

　　itemModel.id = "model" + Math.random();

 

2、获取id

　　var modelId = itemModel.id;

 

第三章  集合

　　backbone用集合来管理多个模型

 

一、创建模型的集合

<script>

    // 创建一个模型
    var InvoiceItemModel = Backbone.Model.extend({
        default: {
            descripion:"",
            price: 0,
            quantity: 1
        }
    })

    // 方法一：通过模型对象的名来传入
    var Collection = Backbone.Collection.extend({
        model: InvoiceItemModel
    })

    // 方法二：创建一个新的集合，并传入模型的初始化
    var invoiceCollection = new InvoiceItemCollection([
        {descripion:"Toy House", price: 22, quantity: 3},
        {descripion:"Toy House1", price: 23, quantity: 4},
        {descripion:"Toy House2", price: 24, quantity: 5},
        {descripion:"Toy House3", price: 25, quantity: 6}
    ])
</script>

 

  

第四章   视图

一、概念

　　视图对象主要用来渲染数据以产生html代码，一个视图可以绑定到DOM中的HTML元素.

二、渲染视图

　　当把数据显示给用户都需要用backbone的视图来进行渲染。

<script>
    // 创建一个视图
    var v1 = Backbone.View.extend({
        el: "#box",

        // 初始化时调用视图
        init: function(){
            this.html = "woodn toy house"
        },

        // 读取视图
        render: function(){
            $(this.el).html(this.html);
        }
    })

    // 实例化视图
    var oV1 = new v1();
    oV1.init();

    // 读取视图
    oV1.render();
</script>

 

读取模版中的数据

<script>
    var m1 = Backbone.Model.extend({
        descripion:"Toy House",
        price: 22,
        quantity: 3
    })

    var oM1 = new m1();

    // 创建一个视图
    var v1 = Backbone.View.extend({
        el: "#box",

        // 读取视图
        render: function(){
            $(this.el).html("hello " + oM1.descripion + " " + oM1.price + " " + oM1.quantity);
        }
    })

    // 实例化视图
    var oV1 = new v1();

    // 读取视图
    oV1.render();
</script>