backbone学习进阶—

最新推荐文章于 2024-06-01 15:14:39 发布

我们认识么

最新推荐文章于 2024-06-01 15:14:39 发布

阅读量1.3k

点赞数

分类专栏： backbone 文章标签： backbone

本文链接：https://blog.csdn.net/ul646691993/article/details/46353437

版权

本文详述了Backbone.js的学习过程，涵盖了关键知识点，包括事件绑定、模型数据操作、集合操作和与服务器的交互。重点讨论了模型的初始化、验证机制、数据清除、事件监听与触发、模型与集合的添加、删除和排序，以及如何与服务器进行数据同步。同时，讲解了视图中元素事件的动态绑定和取消。

摘要由CSDN通过智能技术生成

早就知道backbone有一些好处，今天开始系统的学习一下backbone了，然后自己在这里贴一些傻逼的不行的代码片段。

代码一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="jquery-2.1.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<body>

<div id="search_con">
    <input  type="button"  id="search_input" value="hahaha">
    <div id="div2"></div>
</div>
<script>
    (function ($) {
    
        AppView=Backbone.View.extend({
            el: $("body"),
            initialize:function(){
    
                this.render();
            },
            render:function(){
    
                var template="我就是哈哈了一下";
                $("#div2").html(template);
            },
            events:{
                "click #search_input":"checkIn" //事件绑定,绑定Dom中id为check的元素
            },
            checkIn: function(event){
    
                alert("search for");
//            var world_name = prompt("请问,您是哪星人?");
            }
        });

        var appview= new AppView();
    })(jQuery);
</script>
</body>
</html>

有几个点第一次没有注意：
1. backbone一定要写在 (function ($) {...})(jQuery);里面，这个自己一开始就没有记住。
2.jquery的语法要记熟，说实在的明天还应该看看jquery，看看一些怎么写的比如$("#div2").html(template);这句话自己一开始就是因为语法问题写错了。
3. 注意el: $("body") 怎么写，以及可以写在不同的位置

通过backbone绑定多个事件并且通过history获取历史信息等。

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
} });
var man = new person();
man.on("change:score change:age", function (model, value) {
   
var oldage = model.previous("age");
var newage = model.get("age");
if (oldage != newage) {
} console.log("age 原值 :" + oldage + ", 新值 :" + newage);
var oldscore = model.previous("score"); var newscore = model.get("score");
if (oldscore != newscore) {
console.log("score 原值 :" + oldscore + ", 新值 :" + newscore);
}
});
man.set("age", 36); man.set("score", 200);

通过once保证事件只被触发一次

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person();
var intNum = 0; man.once("change", function () {
   
intNum++;
}); console.log("事件触发的次数为"+intNum);
man.set("age", 36); man.set("age", 37);

手动触发一个事件

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person(); man.on("change_age_sex", function () {
   
}); console.log("您手动触发了一个自定义事件");
man.on("change:age", function (model, value) {
    if (value != undefined)
elseconsole.log(" 您修改后的年龄为 " + value);
console.log(" 您手动触发了一个年龄修改事件 "); })
man.trigger("change_age_sex"); man.trigger("change:age"); man.set("age", 37);

决定移除一个事件的代码

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person();
var m=0, n=0;
var callback_a = function () {
m++;
} console.log(" 您执行 a 事件的次数为 " + m);
var callback_b = function () { n++;
} console.log(" 您执行 b 事件的次数为 " + n);
man.on("event_a", callback_a); man.on("event_b", callback_b); man.off("event_a"); man.trigger('event_a event_b'); man.off("event_a event_b"); man.trigger('event_a event_b');

//下一个是移除全部的事件
var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person();
var m=0, n=0;
var callback_a = function () {
m++;
} console.log(" 您执行 a 事件的次数为 " + m);
var callback_b = function () { n++;
} console.log(" 您执行 b 事件的次数为 " + n);
man.on("event_a", callback_a); man.on("event_b", callback_b); man.off();
man.trigger('event_a event_b');

当然backbone也可以用监听事件

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person();
var obj = _.extend({}, Backbone.Events); obj.listenTo(man, "change:age", function (model, value) {
   
var oldage = model.previous("age"); var newage = model.get("age");
if (oldage != newage) {
console.log("age 原值 :" + oldage + ", 新值 :" + newage); }); }
man.set("age", 37);

监听一次事件

var person = Backbone.Model.extend({ defaults: {
name: "", sex: " 女 ", age: 32, score: 120
}); }
var man = new person();
var obj = _.extend({}, Backbone.Events);
var intNum = 0;
obj.listenToOnce(man, "change:age", function () {
   
intNum++;
}); console.log("事件触发的次