backbone java_Backbone入门——开发第一个Backbone页面

1. 功能描述

在新建的html页面中，通过导入的backbone文件搭建一个简单的mvc结构。当用户进入该页时，id号为“divTip”的

元素中将显示“hello,backbone!”字样。

2. 实现代码

String basePath= request.getScheme() + "://"

+ request.getServerName() + ":" +request.getServerPort()+ path + "/";%>

Backbone Helloworld

window.Test =Backbone.Model.extend({

defaults: {

content:""}

});//创建集合模型类

window.TestList =Backbone.Collection.extend({

model: Test

});//向模型添加数据

var data = newTestList({

content:"hello,backbone!"});//创建View对象

window.TestView =Backbone.View.extend({

el: $("body"),

initialize:function() {

$("#divTip").html(data.models[0].get("content"));

}

});//实例化View对象

window.App = newTestView;

});

3. 页面效果

执行代码后的页面效果如图1-5所示。

4. 源码分析

在本示例的页面代码中，首先在

元素中导入3个相应的库文件，即jQuery框架、Backbone主框架和依赖库Underscore。需要注意它们导入页面的顺序，由于代码是按照自上而下的顺序进行执行的，因此先导入jQuery框架文件；Backbone依赖于Underscore库，因此在导入Underscore库文件后，才导入Backbone主框架文件。

然后，在

//定义模型类

window.Test =Backbone.Model.extend({

defaults: {

content:""}

});

通过Backbone中的extend方法自定义一个Model层模型类“Test”。在该模型类中，使用“defaults”方式设置模型实例化时，将复制默认数据项“content”。在通常情况下，模型类中的默认数据项的值都为空，在实例化模型类时，才真正被实参所取代。如果要设置多个默认的数据项参数，可以用逗号进行隔开。这一部分主要是构建模型类，并设置一些默认数据项。

注意

在实例化模型类时，无论是否向每个已设置的默认数据项传递实参，这些默认数据项都将全部复制到这个实例化对象中。

//创建集合模型类

window.TestList =Backbone.Collection.extend({

model: Test

});//向模型添加数据

var data = newTestList({

content:"hello,backbone!"});

先通过Backbone中的extend方法自定义一个Collection层集合类“TestList”。在该集合类中，使用“model”方式声明该集合类继承了模型类“Test”。然后实例化一个集合类对象“data”。在实例化过程中，根据模型类中设置的默认数据项向集合类中添加对应的数据，即将content的实参设置为“hello,backbone!”。

//创建View对象

window.TestView =Backbone.View.extend({

el: $("body"),

initialize:function() {

$("#divTip").html(data.models[0].get("content"));

}

});

先通过Backbone中的extend方法自定义一个View层视图类“TestView”，在该视图类中，将el属性设置为“$("body")”，表明是针对整个页面元素部分；接下来在定义的initialize()函数中，通过get方式获取集合对象data中content数据项的值，即“hello,backbone!”字符串，并将该字符串内容显示在ID号为“divTip”的页面元素中。

最后，实例化一个视图类对象App，代码如下。

//实例化View对象

window.App = new TestView;

执行上述代码之后，由于在视图类中定义了initialize()函数，在创建一个新实例时，视图类中的initialize()函数会自动被执行，即最终将“hello,backbone!”显示在ID号为“divTip”的页面元素中。