Phonegap-Android的backbone-min.js之集合事件

来源：互联网发布：淘宝店工商执照编辑：程序博客网时间：2024/06/06 04:52

集合Collection支持事件，内置add，remove和reset事件，我们可以注册需要绑定事件的类型进行回调自定义方法。

比如要监听Collection对象的add方法，代码如下：

<!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、定义一个全局变量计数        var i=0;   //5、为Collection注册“add”监听事件，一旦Collection被调用add()方法   //增加元素，就会回调监听事件注册的回调方法，回调方法的参数是增加的元素对象function createObject(){todoList.on("add",function(todoItem){alert(todoItem.get("item"));});}   //6、点击按钮，为Collection增加元素，每增加一个元素，Model的属性自增1function onClickFuc(){var todoItem=new TodoItem({      item:"todoItemTest"+i        });          todoList.add(todoItem);        i++;}</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" onclick="onClickFuc()">Click Me!</button></ul></div><footer data-role="footer"><h1>Footer</h1></footer></div><!-- end first page --></body></html>

效果：

0 0