Model集合,Collection,用法类似java中的ArrayList。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index.html</title>
<link rel="stylesheet" href="../jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="../jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="../jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../cordova-2.0.0.js" ></script>
<script type="text/javascript" charset="utf-8" src="../underscore-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../backbone-min.js"></script>
<script type="text/javascript" charset="utf-8">
//1、为dom注册事件,设备加载完成后回调createObject()方法
$(document).ready(function(){
document.addEventListener("deviceready", createObject, false);
});
//2、定义一个模型
var TodoItem=Backbone.Model.extend({
initialize: function(){
}
});
//3、定义一个Collection,是一个Model的集合,可以理解为java中的ArrayList
var TodoList=Backbone.Collection.extend({
//Collection中允许的Model类
model:TodoItem
});
var todoList=new TodoList();
//4、创建2个TodoItem类的对象,放入到Collection中
function createObject(){
var todoItem1=new TodoItem({
item:"todoItemTest1"
});
var todoItem2=new TodoItem({
item:"todoItemTest2"
});
todoList.add(todoItem1);
todoList.add(todoItem2);
}
//5、点击按钮,获取Collection的长度
function onClickFuc(){
alert(todoList.length);
}
</script>
</head>
<body>
<!-- begin first page -->
<div id="page1" data-role="page" >
<header data-role="header"><h1>Hello World</h1></header>
<div data-role="content" class="content">
<div id="textdiv">HelloWorld</div>
<button type="button" οnclick="onClickFuc()">Click Me!</button>
</ul>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</div>
<!-- end first page -->
</body>
</html>