在backbone中使用模型、集合、视图的方法进行数据的增、删、改、查。没有发出ajax请求就进行了页面dom节点的删除,求各位大神解答。
代码如下:
<script type="text/javascript" src="lib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/underscore/underscore-min.js"></script>
<script type="text/javascript" src="lib/backbone/backbone-min.js"></script>
<script type="text/javascript">
/*
* 创建一个数据模型
* */
var modelInfo = Backbone.Model.extend({
default: {
content: null,
date: null,
status: 0
},
urlRoot: "/list/all"
});
/*
* 创建一个存放 数据模型的集合
* */
var list = Backbone.Collection.extend({
model: modelInfo,
url: "list/all"
});
//实例化集合实体对象
var allinfo = new list();
// 创建一个视图类 v-1
var listview = Backbone.View.extend({
el: "#box",
events: {
"click #addinfo": "add"
},
add: function (e) {
//实例化一个模型
var tempmodel = new modelInfo();
var tempval = $(e.target).prev().val();
tempmodel.save({content: tempval}, {url: "/resource", success: function () {
$("ul").append("<li>" + tempval + "</li>")
}});
},
initialize: function () {
allinfo.fetch({success: function () {
var tempstr = "";
for (var i = 0; i < allinfo.length; i++) {
tempstr += "<li>" + allinfo.at(i).get("s_info") + "</li>";
}
$("ul").html(tempstr).find("li").live("click", function (e) {
var templi = $(e.target);
var indexid = $("ul li").index($(e.target));
allinfo.at(indexid).destroy({success: function () {
templi.remove();
}});
});
}});
}
})
//创建一个类的实体对象 对象 v-2
var listview = new listview();
</script>
</body>
</html>
allinfo.at(indexid).destroy({success: function (model, response) {
templi.remove();
}, wait: true});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。