从零开始学backbone.js(1)

最新推荐文章于 2024-06-16 09:49:24 发布

马红权

最新推荐文章于 2024-06-16 09:49:24 发布

阅读量1k

点赞数

文章标签： backbone.js

本文链接：https://blog.csdn.net/mahongquan/article/details/17675607

版权

我学javascript时间不长，jquery都只是看过，基本没用过，现在开始学backbone.js,基本可以说是从零开始。

找到backbone.js的例子，却看不懂，不知如何下手。

从backbone.js的文档入手可能不错，有兴趣的同学和我一起来学习吧。

第一个例子,自定义事件：

<html>
<head>
<meta charset="gbk" />
<script src="underscore.js"></script>
<script src="backbone.js"></script>
</head>
<body>
hello,html
<script  type="text/javascript">
    document.write("Hello javascript!")
    var object = {};
    _.extend(object, Backbone.Events);
    object.on("alert", function(msg) {
      alert("hello " + msg);
    });
    object.trigger("alert", "event trigger");
</script>
</body>
</html>

第二个例子，多个事件,一个处理函数：

<html>
<head>
<meta charset="gbk" />
<script src="underscore.js"></script>
<script src="backbone.js"></script>
</head>
<body>
hello,html
<script  type="text/javascript">
    document.write("Hello javascript!")
    var object = {};
    _.extend(object, Backbone.Events);
    object.on("alert", function(msg) {
      alert("hello " + msg);
    });
    //多个事件,一个处理函数
    object.on("event2 event3", function(msg) {
      alert("event2,event3 handler:" + msg);
    });
    object.trigger("event3", "event trigger");
</script>
</body>
</html>

第三个例子，响应全部事件和事件传递：

<html>
<head>
<meta charset="gbk" />
<script src="underscore.js"></script>
<script src="backbone.js"></script>
</head>
<body>
hello,html
<script  type="text/javascript">
    document.write("Hello javascript!")
    var object1 = {};
    _.extend(object1, Backbone.Events);
    object1.on("alert", function(msg) {
        console.log("object1: hello " + msg);
    });
    var object2={};
    _.extend(object2, Backbone.Events);
    object2.on("alert", function(msg) {
        console.log("object2:hello " + msg);
    });
    //响应全部事件(事件代理，将事件传递到其他对象)
    object1.on("all", function(msg) {
        console.log("all events handler:" + msg);
        object2.trigger(msg);
    });
    object1.trigger("alert", "event trigger");
</script>
</body>
</html>

第四个例子,注销事件:

<html>
<head>
<meta charset="gbk" />
<script src="underscore.js"></script>
<script src="backbone.js"></script>
</head>
<body>
hello,html
<script  type="text/javascript">
    document.write("Hello javascript!")
    var object = {};
    _.extend(object, Backbone.Events);
    function  onAlert(msg){
        alert("hello " + msg);
    }
    object.on("alert",onAlert);
    object.off("alert", onAlert);//注销事件
    
    object.trigger("alert", "event trigger");
</script>
</body>
</html>