初识backbone之HelloWord



    backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

优势：

1. 将数据和界面很好的分离开来。

2. 将事件的绑定很好的剥离出来，便于管理和迭代。

3. 使得Javascript程序的模块化更加清晰、明了。

应用场景：

最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。

话不多说，直接上实例：

首选定义一个应用：

 $(document).ready(function () {
            var App = {
                model: {},
                collection: {},
                view: {},
                initialize: function () {
                    var myModel = new App.model({name:"火云邪神正在打代码",message:"Hello World"});
                    var myView = new App.view({ model: myModel });
                }
            }

根据定义：主要的组成部分是：

1.model：创建数据，进行数据验证，销毁或者保存到服务器上

2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类

3.view：绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等

依次建立代码

Models：

 App.model = Backbone.Model.extend({
                name: "null",
                message:"null"
            })

Collection:

  App.collection = Backbone.Collection.extend({
                model:App.model
            })

View:

App.view = Backbone.View.extend({
                el: $("body"),
                template: _.template($('#hello-container-template').html()),//scriptTemplate的ID 看下面script的代码 _.是underscore的写法
                events: {  },
                initialize: function () {
                    this.render();
                },
                render: function () {
                    $(this.el).html(this.template(this.model.toJSON()));
                }
            })

Script：用来显示内容的

<script id="hello-container-template" type="text/template">
            <div><%=name> says: <%= message></div>
        </script>

最后初始化一下就可以了：

App.initialize();

运行结果截图：

具体哪里不懂可以直接看API：

1.http://www.css88.com/doc/backbone/

2.http://www.css88.com/doc/underscore/