87,988
社区成员
发帖
与我相关
我的任务
分享Backbone初学者的问题
html页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>人员资料信息管理首页</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
<script src="js/backbone.localStorage-min.js"></script>
<script type="text/javascript" src="js/application02.js"></script>
<link href="css/person.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="info"></div>
</body>
<script type="text/template" id="tpl-item">
<%=(name?name:"<i>姓名为空</i>")%>
</script>
<script type="text/template" id="tpl-top">
<header>
<input type="search" autofocus>
</header>
<div class="items">
</div>
<footer>
<button>新建</button>
</footer>
</script>
<script type="text/template" id="tpl-show">
<header>
<a class="edit">编辑</a>
</header>
<div class="content">
<p>姓名：<%=name%></p>
<p>性别：<%=sex%></p>
<p>邮箱：<%=email%></p>
</div>
</script>
<script type="text/template" id="tpl-edit">
<header>
<a class="save">保存</a>
<a class="dele">删除</a>
</header>
<div class="content">
<form>
<div>
<span>姓名：</span>
<input type="text" id="name" name="name" value="<%=name%>"/>
</div>
<div>
<span>性别：</span>
<input type="text" id="sex" name="sex" value="<%=sex%>"/>
</div>
<div>
<span>邮箱：</span>
<input type="email" id="email" name="email" value="<%=email%>"/>
</div>
</form>
</div>
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>人员资料信息管理首页</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
<script src="js/backbone.localStorage-min.js"></script>
<script type="text/javascript" src="js/application02.js"></script>
<link href="css/person.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="info"></div>
</body>
<script type="text/template" id="tpl-item">
<%=(name?name:"<i>姓名为空</i>")%>
</script>
<script type="text/template" id="tpl-top">
<header>
<input type="search" autofocus>
</header>
<div class="items">
</div>
<footer>
<button>新建</button>
</footer>
</script>
<script type="text/template" id="tpl-show">
<header>
<a class="edit">编辑</a>
</header>
<div class="content">
<p>姓名：<%=name%></p>
<p>性别：<%=sex%></p>
<p>邮箱：<%=email%></p>
</div>
</script>
<script type="text/template" id="tpl-edit">
<header>
<a class="save">保存</a>
<a class="dele">删除</a>
</header>
<div class="content">
<form>
<div>
<span>姓名：</span>
<input type="text" id="name" name="name" value="<%=name%>"/>
</div>
<div>
<span>性别：</span>
<input type="text" id="sex" name="sex" value="<%=sex%>"/>
</div>
<div>
<span>邮箱：</span>
<input type="email" id="email" name="email" value="<%=email%>"/>
</div>
</form>
</div>
</script>
</html>
...全文
请发表友善的回复…
发表回复
vincent_learn 2015-08-11
- 打赏
- 举报
------------------------------------------------------------------------------------------------
下面是问题：
在“PersonItemView” 中没有remove 这事绑定的哪里的？这个this不是指定的是由这个PersonItemView创建出来的对象么，
this.model.view 又是什么，为什么要调用这里的remove
this.model.bind('destroy',this.remove,this);
if(this.model.view){
this.model.view.remove();
}
在TopView中的this.seleItem 又是什么
if(this.seleItem) {
this.seleItem.view.desele();
}
this.seleItem = item;
if(this.seleItem) {
this.seleItem.view.sele();
}
还有其他好多View中的this.item 的item是哪里来的
整段代码的大概操作能看明白，就是不懂这些细节是怎么回事，请高手指点。
如果可以的话，希望可以把整段代码解释一遍，学习下是否我理解的有出入。
vincent_learn 2015-08-11
- 打赏
- 举报
css代码如下：
@charset "utf-8";
/* CSS Document */
body
{
font-size:13px
}
.unact {
position: relative;
}
.unact > *:not(.sele){
display: none;
}
button{
border: solid 1px #ccc;
background-color: #eee;
line-height: 18px;
font-size: 12px;
}
#info{
width: 360px;
border: solid 1px #cccccc;
background-color: #eeeeee;
}
#info .person .top{
width: 100%;
}
#info .person .top header input{
border: none;
height: 28px;
line-height: 28px;
width: 100%;
font-size: 20px;
border: solid 1px #cccccc;
line-height: 18px;
font-size: 12px;
padding: 3px;
}
#info .person .top .items{
overflow-y: scroll;
background-color: #ffffff;
}
#info .person .top .item{
height: 32px;
padding: 0 15px;
line-height: 32px;
border-bottom: 1px solid #cccccc;
color: #333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#info .person .top .item.sele{
color: #555555;
background: #eeeeee;
}
#info .person .top footer{
padding: 6px;
border-bottom: 1px solid #c5c5c5;
background: #ffffff;
text-align: right;
}
#info .person .main{
width: 100%;
}
#info .person .main header{
color: #333333;
font-weight: bold;
text-shadow: 0 1px 1px #fff;
font-size: 14px;
border-bottom: 1px solid #cccccc;
background: #ffffff;
overflow: hidden;
}
#info .person .main header a{
float: left;
line-height: 32px;
height: 32px;
padding: 0 20px;
cursor: pointer;
border-right: 1px solid #cccccc;
text-decoration: none;
}
#info .person .main .content{
padding: 20px;
}
vincent_learn 2015-08-11
- 打赏
- 举报
js源代码如下：
(function ($) {
$(function () {
//构建人员资料信息数据模块类
var Person = Backbone.Model.extend({
defaults:{
name:'',
sex:'',
email:''
},
search: function (key) {
//如果是“空”返回true，如果“不存在”返回true
if(typeof (key)=== 'undefined'||key===null||key==='' ){
return true;
}
key = key.toLowerCase();//转化为小写
return this.get('name').toLowerCase().indexOf(key)!=-1||this.get('email').toLowerCase().indexOf(key)!=-1;
}
});
//构建基于模块类的集合类并指定数据缓存对象
var Persons = Backbone.Collection.extend({
model:Person,
localStorage:new Store('person-data')
});
//构建“姓名”列表中单个选项的视图
var PersonItemView = Backbone.View.extend({
className:'item',
template: _.template($('#tpl-item').html()),
events:{
'click':'select'
},
initialize: function () {
_.bindAll(this,'select');
console.log(this);
this.model.bind('reset',this.render,this);
this.model.bind('change',this.render,this);
this.model.bind('destroy',this.remove,this);
if(this.model.view){
this.model.view.remove();
}
this.model.view = this;
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
//当选中行时，跳转地址
select: function () {
appRouter.navigate('person/'+this.model.cid,{
trigger:true
});
},
//当前视图可以操作的颜色标示
sele: function () {
this.$el.addClass('sele');
},
desele: function () {
this.$el.removeClass('sele');
}
});
//构建顶部搜索和新建人员信息的视图表
var TopView = Backbone.View.extend({
className:'top',
template: _.template($('#tpl-top').html()),
events:{
'click footer button':'create',
'keyup input':'search'
},
initialize: function () {
_.bindAll(this,'create','search');
this.model.bind('reset',this.renderAll,this);
this.model.bind('add',this.add,this);
this.model.bind('remove',this.remove,this);
},
render : function () {
$(this.el).html(this.template());
this.renderAll();
return this;
},
//清空数据 显示数据
renderAll: function () {
this.$('.items').empty();
//console.log(this);
this.model.each(this.renderOne,this);
this.search();
},
renderOne: function (contact) {
//实体赋值
var view = new PersonItemView({
model:contact
});
this.$('.items').append(view.render().el);
},
//添加对象
create: function () {
//创建人单独对象
var contact = new Person();
this.model.add(contact);//添加当前一条记录到model对象
appRouter.navigate('person/'+contact.cid+'/edit',{trigger:true});
},
//按键后触发事件 调用搜索
search: function () {
var key = $('input',this.el).val();
//当前集合中逐个查找
this.model.each(function (contact, element, index, list) {
contact.view.$el.toggle(contact.search(key));
});
},
sele: function (item) {
if(this.seleItem) {
this.seleItem.view.desele();
}
this.seleItem = item;
if(this.seleItem) {
this.seleItem.view.sele();
}
},
add: function (contact) {
this.renderOne(contact);
},
remove: function (contact) {
console.log(contact.cid);
}
});
//构建用于显示个人资料详细页的视图表
var ShowView = Backbone.View.extend({
className:'show',
template: _.template($('#tpl-show').html()),
events:{
'click .edit':'edit'
},
initialize: function () {
_.bindAll(this,'edit');
},
render: function () {
if(this.item) {
this.$el.html(this.template(this.item.toJSON()));
}
return this;
},
change: function (item) {
this.item = item;
this.render();
},
edit: function () {
if(this.item){
appRouter.navigate('person/'+this.item.cid+'/edit',{trigger:true});
}
}
});
//构建用于编辑个人资料信息的视图表
var EditView = Backbone.View.extend({
className:'edit',
template: _.template($('#tpl-edit').html()),
events:{
'click .save':'submit',
'click .dele':'remove'
},
initialize: function () {
_.bindAll(this,'submit','remove');
},
render: function () {
if(this.item){
this.$el.html(this.template(this.item.toJSON()));
}
return this;
},
change: function (item) {
this.item = item;
this.render();
},
submit: function () {
this.item.set(this.form());
this.item.save();
appRouter.navigate('person/'+this.item.cid,{trigger:true});
return false;
},
form: function () {
return{
name:this.$('#name').val(),
email:this.$('#email').val(),
sex:this.$('#sex').val()
};
},
remove: function () {
this.item.destroy();
this.item = null;
appRouter.navigate('',{trigger:true});
}
});
//构建包含显示和编辑视图对象的主视图类
var MainView = Backbone.View.extend({
className:'main unact',
initialize: function () {
this.editView = new EditView();
this.showView = new ShowView();
},
render: function () {
this.$el.append(this.showView.render().el);
this.$el.append(this.editView.render().el);
return this;
},
edit: function (item) {
this.showView.$el.removeClass('sele');
this.editView.$el.addClass('sele');
this.editView.change(item);
},
show: function (item) {
this.editView.$el.removeClass('sele');
this.showView.$el.addClass('sele');
this.showView.change(item);
}
});
//构建整个页面展示的视图表，包含顶部和主视图两个对象
var AppView = Backbone.View.extend({
className:'person',
initialize: function () {
this.top = new TopView({
model:this.model
});
this.main = new MainView();
this.model.fetch();
this.render();
},
render: function () {
this.$el.append(this.top.render().el);
this.$el.append(this.main.render().el);
$("#info").append(this.el);
return this;
},
show: function (item) {
this.top.sele(item);
this.main.show(item);
},
edit: function (item) {
this.top.sele(item);
this.main.edit(item);
}
});
//构建路由导航类,根据不同Hash执行对应方法
var AppRouter = Backbone.Router.extend({
routes:{
'':'show',
'person/:id':'show',
'person/:id/edit':'edit'
},
show: function (id) {
if(id!=undefined){
appView.show(this.getPerson(id));
}else{
appView.show(person.first());
}
},
edit: function (id) {
appView.edit(this.getPerson(id));
},
getPerson: function (id) {
return person.get(id);
}
});
var person = new Persons();
//实例化一个整体页面视图对象，启动各个数据绑定和渲染功能
window.appView = new AppView({
model:person
});
//实例化一个路由导航对象
window.appRouter = new AppRouter();
//开启路由导航功能
Backbone.history.start();
});
})(jQuery);
