Blog:http://www.the5fire.net共享、交流、提高
Backbone.js入门教程
作者：胡阳（the5fire）
blog:http://www.the5fire.net
关于作者更多信息：
http://www.the5fire.net/about
制作日期：2012-04-19
版权声明
本电子读物所登载文章,著作权均归作者本人持有。
除特别声明外,
本电子读物之内容采用如下CC(CreativeCommons)协议授权:
署名-非商业性使用-相同方式共享。
1
Blog:http://www.the5fire.net共享、交流、提高
目录
写在前面的话.........................................................................................................3
1、初识backbone.js.............................................................................................4
2、通过helloworld来认识下backbone..................................................................5
3、backbone中的model实例...............................................................................7
4、backbone的collection实例...........................................................................12
5、backbone中的Router实例............................................................................17
6、backbone中的view实例................................................................................22
7、backbone实例todos分析（一）.....................................................................28
8、backbone实例todos分析(二)view的应用.......................................................33
9、backbone实例todos分析（三）总结...............................................................40
10、django开发环境搭建及使用...........................................................................43
11、backbone实例todos扩展+web服务器.........................................................44
12、backbone实战：webchat（一）功能分析......................................................54
13、backbone实战：webchat（二）详细设计......................................................55
14、backbone实战：webchat（三）web端开发..................................................60
15、backbone实战：webchat（四）server端开发..............................................65
16、总结的说.......................................................................................................71
17、backbone.js相关资源...................................................................................72
2
Blog:http://www.the5fire.net共享、交流、提高
写在前面的话
这一系列的文章写了这一了了方制作PDF式的
有backbone.js的同。
一写一系列的?前有过￠多写系列文章的￡?￥过?写了一§currency1''“一?
?下了如：设计?式fi有tomcat源fl。
实这一系列文章的–?目的fi?初backbone.js的人能·?的??用?目。写
backbone的”“在?…‰关于?的资?§发中文的资?`′?`′?ˉ?
有˙在¨说?写????“ˇ?''一—一—?面的的了一
下写文章。
?这?写来￥说明?有多??、提高、分享。于这?
????a??的写来分享。
?一?人??o来的过程中的所有?下一?者说
面o所的同§?有??的。所?￥??有多o?应?
的思的写下来哪怕?有一点。
所有的文章中会有￠多￥足的地方如果发错误欢迎应的¨文链接拍砖。每篇文章
?给了链接方?跳转页。
最写一句话?显示?的文水平（拍砖）：没有开始怎会有;没有总结怎
会有收获;没有分享怎会有升华。
3
Blog:http://www.the5fire.net共享、交流、提高
1、初识backbone.js
作者：胡阳
本文链接:http://www.the5fire.net/touch-backbone-js.html
backbone英文意思：勇气脊骨?在程序面尤在backbone面加
缀js之?''变了一?框架一?js库。
backbone.js￥作者?什样的目的来命名的可能希这?库会web
端开发中脊梁骨。
好了八卦了开始正题。
backbone.js提供了一套web开发的框架通过Models进行key-value绑定及
custom?件处,通过Collections提供一套丰富的API用于枚举功能,通过Views来进
行?件处及与有的Application通过RESTfulJSON接口进行交互.?基于jquery
和underscore的一?js框架。
整体来说backbone.js一?web端javascript的mvc框架重a级的框
架。?能?像写java?fl一?写js?fl定义类类的属性?及方法。更重?的?能·优雅的?
”本无逻辑的javascript?fl进行组织并且提供数据和逻辑相互分离的方法减??fl开发过程中
的数据和逻辑混乱。
通过backbone可??的数据当作Models通过Models可?创建数据进行数
据验证销毁者保存服务器。当界面的操作引model中属性的变化§model会触发
change的?件;那?用来显示model状态的views会接受model触发change的消息进
发应的响应并且重新渲染新的数据界面。在一?整的backbone应用中￥需?写那?
胶水?fl来?DOM中通过特殊的id来获取点者的更新HTML页面“在model发
变化§views会￠的进行?更新。
面一?的关于backbone?的和的教程之一?
前端开发制定了一套的在这?下?可?像使用django组织python?fl一样的组
织js?fl?￠优雅能·使前端和server的交互变。
在backbone资?的§发没有￠系的中文入门资?和更多的实例所???
——写取能?通过一系列文章能?的用backbone.js。
关于backbone的更多这?：
http://documentcloud.github.com/backbone/
http://backbonetutorials.com/
backbone的应用：
??一?重a级的框架那''￥什地方?能用的￥?''会用
4
Blog:http://www.the5fire.net共享、交流、提高
￥好的结果。那用在哪?地方
据?backbone.js功能的如果?页有非?￠￡的业务逻辑那用?￠?
?可?￠容￥的操作dom和组织js?fl。
?§的currency1''法“一??好的例子。当?除了?分析的应用之外在backbone
的文?了￠多使用?的外?fi点有￠多说明backbonefi￠￥用的。
2、通过helloworld来认识下backbone
作者：胡阳
本文链接:http://www.the5fire.net/2-helloworld-backbone.html
先来说一下这个helloworld的功能：
在页面上有一个报道的按钮，点击弹出输入框，输入内容，确认，最后内容会加到页面上。页面
图如下：
下面来看代码：
fl–??·????
5.-.-??”‰?””?`?′?`?”ˉ?˙”???¨???…
5
Blog:http://www.the5fire.net共享、交流、提高
<`?…>
<`????‰…=""′?”′?>?
更多教程
(($){?′?‰?
=..({¨???…?′?`?”?…”?”??”…
//创建一?¨???…的有??”属性
:??”???
});
=..({¨???…??′?`?”–???”′?‰?”??”…
//¨???…的?
:(,){‰‰?‰??‰”?′?‰???…”?????‰??
.("",..);??‰?`‰…?……???‰??‰”?……”¨???…
}
});
=..({??‰”?′?`?”‰””??”…
:$(""),”?`?…
:(){‰‰?‰??‰”?′?‰?
//数实例化一?¨???…?类并且?方式入??‰”的
.=(,{:})??‰????…?”¨???…????‰”??‰?
},
:{””??
"#":"",//′?‰′?′?”′?′?”′??件绑定绑定fl??中‰…′?”′?的?
},
:(){′?”′??′?‰?
_=("?????…??”??????a哪人?");
(_=="")_=''‰???…??”???…??”'';
=({:_});?????…”¨???…??”???…??”
..();??‰????…??……???…
6
Blog:http://www.the5fire.net共享、交流、提高
},
:(){?……”¨???…?′?‰???…”?
$("#-").("这来<`>"+.('''')+"的a：?”??????…
");
}
});
//实例化??‰”
=;?????‰””??‰”
})();ˉ??”?
?认?fl??的这面o及backbone的三?分
view、model、collection??会提这??了model?一?数据?
collection?的一??view用来处页面?及的页面逻辑的。
3、backbone中的model实例
作者：胡阳
本文链接:http://www.the5fire.net/3-backbone-model.html
关于backbone最基的一?''model这?''像端开发中的数据库
那?model一样数据的?并且应和端的model有相同的属性（?需?通过
前端来操作的属性）。
下面''?实例来一一的来了backbone的model什样的一?。
?定义一?html的页面：
fl–??·????
5--??”‰?”`?′?`?”??…”?
<`?…>
7
Blog:http://www.the5fire.net共享、交流、提高
(($){?′?‰?
/
ˇ处??fl
/
})();ˉ??”?
下面的?fl需?这?html的script??中的function中。
1、最的一?
?=.?′?`?”?…”?.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??('',!''˙”??′?”??”?”);
}
});
????=”?;
这?''￠了在helloworld面有了一?model的展￥定义了属性这一
?初始化§的方法者?之数
2、的方法
一?接定义设置默认。
?=.?′?`?”?…”?.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??('',!''˙”??′?”??”?”);
},
…”?????:{
??”:''张三'',
?ˇ”:''38''
}
});
????=”?;
??”??(.??ˇ”?(''''??”));
二§定义
?=.?′?`?”?…”?.”??”…({
‰‰?‰??‰”:?′?‰?(){
8
Blog:http://www.the5fire.net共享、交流、提高
??”??('',!''˙”??′?”??”?”);
}
});
.???”?({??”:''5''??”‰?”,?ˇ”:''10''});
??”??(.??ˇ”?(''''??”));
取的§?用get。
3、中的方法
?=.?′?`?”?…”?.”??”…({
:‰‰?‰??‰”?′?‰?(){
??”??('',!''˙”??′?”??”?”);
},
:…”?????{
:??”''张三'',
:?ˇ”''38''
},
:?`???”?′?‰?(){
?”???''?叫''+.??‰?ˇ”?(''''??”)+'',今年''+.??‰?ˇ”?(''''?ˇ”)+''岁'';
}
});
????=”?;
??”??(.???`???”());
4、监听中属性的变化
?=.?′?`?”?…”?.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??('',!''˙”??′?”??”?”);
//初始化§绑定监听
??‰?.`‰…(":"′??ˇ”??”,?′?‰?(){
????”=??‰?.ˇ”?(""??”);
??”??("改变了??”属性："+??”);
});
},
…”?????:{
??”:''张三'',
?ˇ”:''38''
},
?`???”:?′?‰?(){
?”???''?叫''+??‰?.ˇ”?(''''??”)+'',今年''+??‰?.ˇ”?(''''?ˇ”)+''岁'';
9
Blog:http://www.the5fire.net共享、交流、提高
}
});
????=”?;
.???”?({??”:''5''??”‰?”})//触发绑定的′??ˇ”?件??”??。
5、添加验证?及错误提示
?=.?′?`?”?…”?.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??('',!''˙”??′?”??”?”);
//初始化§绑定监听
??‰?.`‰…(":"′??ˇ”??”,?′?‰?(){
????”=??‰?.ˇ”?(""??”);
??”??("改变了??”属性："+??”);
});
??‰?.`‰…(""”????,?′?‰?(??…”?,”????){
??”??(”????);
});
},
…”?????:{
??”:''张三'',
?ˇ”:''38''
},
??‰…??”:?′?‰?(????‰`??”?){
‰(.????‰`??”???”==''''){
?”???"??”￥能空";
}
},
?`???”:?′?‰?(){
?”???''?叫''+??‰?.ˇ”?(''''??”)+'',今年''+??‰?.ˇ”?(''''?ˇ”)+''岁'';
}
});
????=”?;
.???”?({??”:''''});//据验证弹错误提示。
6、的获取和保存需?服务器端支持才能测试。
?需?定义一?url属性调用save方法§会post的所有属性server端。
?=.?′?`?”?…”?.”??”…({
???:''//''??”,
‰‰?‰??‰”:?′?‰?(){
10
Blog:http://www.the5fire.net共享、交流、提高
??”??('',!''˙”??′?”??”?”);
//初始化§绑定监听
??‰?.`‰…(":"′??ˇ”??”,?′?‰?(){
????”=??‰?.ˇ”?(""??”);
??”??("改变了??”属性："+??”);
});
??‰?.`‰…(""”????,?′?‰?(??…”?,”????){
??”??(”????);
});
},
…”?????:{
??”:''张三'',
?ˇ”:''38''
},
??‰…??”:?′?‰?(????‰`??”?){
‰(.????‰`??”???”==''''){
?”???"??”￥能空";
}
},
?`???”:?′?‰?(){
?”???''?叫''+??‰?.ˇ”?(''''??”)+'',今年''+??‰?.ˇ”?(''''?ˇ”)+''岁'';
}
});
????=”?;;
.???”?({??”:''5''??”‰?”});
.????”();//会发送·S??应的???数据式{"":"5","":38}ˉ????”??”‰?”?ˇ”
//?接着''?服务器端获取数据使用方法([])”?′????‰??
??1??=”?;
//一情况如果?接使用”?′?方法那会发送ˇ”?求??…”?的???中
//在服务器端可?通过判断ˇ”?fi????来进行应的操作。
1.??”?′?();
//二情况在”?′?中加入数如下：
1.??”?′?({???:''//''ˇ”????});
//这样''会发送ˇ”?求//ˇ”????这????中
//服务器返回的结果样式应应的ˉ??式数据同??”§·S?过的式。
//￥过接受服务器端返回的数据方法这样的：
1.??”?′?({???:''//''ˇ”????,??′′”??:?′?‰?(??…”?,?”????”){
11
Blog:http://www.the5fire.net共享、交流、提高
??”??(''''??′′”??);
//??…”?获取的数据
??”??(.??…”?ˇ”?(''''??”));
},”????:?′?‰?(){
//当返回式￥正确者非ˉ??数据§会执行ˇ方法
??”??(''''”????);
}});
注：述?fl??均可正?执行的?fl￥过关于服务器端的实例在面会有。
这fi?补?一点''关于服务器的异操作?通过Backbone.sync这?方法来的
调用这?方法的§会?的递一?数过据数向服务器端发送应的求。`如
savebackbone会判断的这?￥新的如果新创建的数create如果已存
在的?进行了改变那数''update如果调用fetch方法那数''read如果
destory那数''delete。''所谓的CRUD(“create”,“read”,“update”,or
“delete”)这四数应的求类POSTGETPUTDELETE。可?在服务器
据这?request类来做相应的CRUD操作。
PS：忘了释关于url和urlRoot的?情了如果设置了url那的CRUD
?会发送应求这?url?这样一?a题''delete求发送了求?
却没有发送?数据那在服务器端''￥应删除哪?（记录）所?这一?
urlRoot的念设置了urlRoot之发送PUT和DELETE求的§求
的url地址''：/baseurl/[model.id]这样''可?在服务器端通过url面的提
取更新者删除应的（记录）。
有一?例外需?提醒下：
如果model和collection一使用那定义的在collection中的url将取?
model所定义的urlRoot?model中的urlRoot须存在。
关于这?Backbone.sync?可能会说￥过目前?入门–。
4、backbone的collection实例
作者：胡阳
本文链接:http://www.the5fire.net/4-backbone-collection.html
collectionmodel的一?有序的?念来十分在通过几?例子来
一下会?更。
1、关于book和bookshelf的例子
12
Blog:http://www.the5fire.net共享、交流、提高
???=.?′?`?”?…”?.”??”…({
…”????:{
?‰??”:''''…”????
},
‰‰?‰??‰”:?′?‰?(){
//('',!'');??”??˙”??′?”??”?”
}
});
???S?”?=.?′?`?”–???”′?‰?.”??”…({
??…”?:???
});
??1`???=”???({?‰??”:''1''`???});
??2`???=”???({?‰??”:''2''`???});
??3`???=”???({?‰??”:''3''`???});
//=([1,2,3]);//??`???S?”?”???S?”?`???`???`???注意这面数组,者使用?……
??`???S?”?=”???S?”?;
.`???S?”??……(1`???);
.`???S?”??……(2`???);
.`???S?”??……(3`???);
13
Blog:http://www.the5fire.net共享、交流、提高
.`???S?”??”??”(3`???);
//基于?…”??′??”这?ˉ?库fi可?使用”?′?的方法获取′???”′?‰?中的数据
.`???S?”?”?′?(?′?‰?(`???){
??”??(.`???ˇ”?(''''?‰??”));
});
￠￥释
2、使用fetch?服务器端获取数据
??在面的的Bookshelf中定义url注意collection中并没有urlRoot这?属性。
者?接在fetch方法中定义url的如下：
.`???S?”?”?′?({???:''//''ˇ”?`????,??′′”??:?′?‰?(′???”′?‰?,?”????”){
.′???”′?‰?”?′?(?′?‰?(`???){
??”??(.`???ˇ”?(''''?‰??”));
});
},”????:?′?‰?(){
??”??(''''”????);
}});
中定义了?接受返回的方法具体含义?想￠容￥返回正确式的数据''会调
用success方法错误式的数据''会调用error方法当?error方法添加和success方法
一样的形。
应的BookShelf的返回式如下：[{''title'':''book1''},{''title'':''book2''}.....]
3、reset方法
这?方法的§?和面的fetch进行配?的collection在fetch数据之会调用
reset方法所?需?在collection中定义reset方法者绑定reset方法。这使用绑定演
示：
14
Blog:http://www.the5fire.net共享、交流、提高
.`???S?”?`‰…(''''?”?”?,?????????);
?????????=?′?‰?(){
.`???S?”?”?′?(?′?‰?(`???){
//将`???数据渲染页面。
});
}
绑定的骤?在fetch之前进行。
下面给关于collection的整?fl需?服务器端支持才行，服务器端的搭建在后面会写到。
fl–??·????
5--??”‰?”`?′?`?”′???”′?‰?
<`?…>
(($){?′?‰?
//′???”′?‰?一?的??…”??的有序?
//1、一?的例子
=..({????′?`?”?…”?”??”…
:{…”????
:''''?‰??”…”????
},
:(){‰‰?‰??‰”?′?‰?
//('',!'');??”??˙”??′?”??”?”
}
});
=..({???S?”??′?`?”–???”′?‰?”??”…
15
Blog:http://www.the5fire.net共享、交流、提高
:??…”????
});
1=({:''1''});??`???”????‰??”`???
2=({:''2''});??`???”????‰??”`???
3=({:''3''});??`???”????‰??”`???
//=([1,2,3]);//??`???S?”?”???S?”?`???`???`???注意这面数组,者使用?……
=;??`???S?”?”???S?”?
.(1);`???S?”??……`???
.(2);`???S?”??……`???
.(3);`???S?”??……`???
.(3);`???S?”??”??”`???
/
(=0;????‰‰<..;++){`???S?”???…”???”ˇ??‰
(.[].(??”??`???S?”???…”??‰ˇ”?''''?‰??”));
}
/
//基于?…”??′??”这?ˉ?库fi可?使用”?′?的方法获取′???”′?‰?中的数据
.((){`???S?”?”?′??′?‰?`???
(.(??”??`???ˇ”?''''?‰??”));
});
//2、使用”?′??服务器端获取数据,使用?”?”?渲染
.(`???S?”?`‰…''''?”?”?,);?????????
.({:`???S?”?”?′????''//''ˇ”?`????,:(,){??′′”???′?‰?′???”′?‰??”????”
.((){′???”′?‰?”?′??′?‰?`???
(.(??”??`???ˇ”?''''?‰??”));
});
},:(){”?????′?‰?
(??”??''''”????);
}});
=(){??????????′?‰?
.((){`???S?”?”?′??′?‰?`???
//将`???数据渲染页面。
});
}
//述?fl??均可正?执行的?fl￥过关于服务器端的实例在面会有。
16
Blog:http://www.the5fire.net共享、交流、提高
})();ˉ??”?
5、backbone中的Router实例
作者：胡阳
本文链接:http://www.the5fire.net/5-backbone-router.html
关于这?router的使用?在依?心存疑惑的。每点击一这样的链接action会触发一
??件?url会改变这样刷性的话岂￥会?触发?件。者这??用在?页面
的fi者移?设备fi者?fi￥会用。
释下Router：
Backbone中的router见名意router有路由的意思显?这?控制url的。
Backbone.Router会?连接中的#??当做url路径
即?心存疑惑依??写几?例子测试一下的。?实践才能惑。
1、一?的例子
????R???”?=.?′?`?”R???”?.”??”…({
????”?:{
""?′?‰??:""…”????R???”
},
…”????R???”:?′?‰?(?′?‰??){
??”??(?′?‰??);
}
});
17
Blog:http://www.the5fire.net共享、交流、提高
??_???????”?=”??R???”?;
.?′?`?”?‰????.?????();
需?通过调用Backbone.history.start()方法来初始化这?Router这?Router的使
用￠像django的urlconf文件提供的功能如果懂django的话。
在页面需?有这样的a??：testActions
2、这?routes?怎数
下面例子立马''了
????R???”?=.?′?`?”R???”?.”??”…({
????”?:{
"//:"?????‰…:""ˇ”?·???,
""?′?‰??:""…”????R???”
},
ˇ”?·???:?′?‰?(‰…){
??”??(‰…);
},
…”????R???”:?′?‰?(?′?‰??){
??”??(?′?‰??);
}
});
??_???????”?=”??R???”?;
.?′?`?”?‰????.?????();
应的页面应有一?超链接：Post120
18
Blog:http://www.the5fire.net共享、交流、提高
?面已?可?匹配#??之内容的方法有：一用“:”来?#面的应
的位置作数；fi有一“”?可?匹配所有的url下面再来演练一下。
????R???”?=.?′?`?”R???”?.”??”…({
????”?:{
"//:"?????‰…:""ˇ”?·???,
"//"…????…????:""…????…F‰?”,//应的链接
="#////.">??”…????…??”?‰??ˇ”??”ˇ‰…????…ˇ‰?
"/:/:"????”?′?‰?:""???…‰”,//应的链接<="#//">/???”…???`???…ˇ????L??…R???”′?‰?
‰”?
""?′?‰??:""…”????R???”
},
ˇ”?·???:?′?‰?(‰…){
??”??(‰…);
},
…”????R???”:?′?‰?(?′?‰??){
??”??(?′?‰??);
},
…????…F‰?”:?′?‰?(????){
??”??(????);////.??”?‰??ˇ”??”ˇ‰
},
???…‰”:?′?‰?(????”,?′?‰?){
19
Blog:http://www.the5fire.net共享、交流、提高
??”??(????”+"_"+?′?‰?);//_…???`???…ˇ????
}
});
??_???????”?=”??R???”?;
.?′?`?”?‰????.?????();
总结router的使用来能·除通过dom点的绑定来触发?件的那繁琐?唯一
???￥爽的''点击之如果再刷新''会重新执行一遍应的方法“url已?变了。许这
?可?决的a题??fi没有发。
另外在的?块中（指：model,view,collection）可?通过使用routes:{}来
据链接触发数。
下面给整的?fl注释掉试验：
fl–??·????
<>????
<>?”?…
<>5--?‰??”??”‰?”`?′?`?”????”??‰??”
?”?…
<>`?…
<="#//120">120???”?????·????
<="#////.">???”…????…??”?‰??ˇ”??”ˇ‰…????…ˇ‰?
<="#//">/???”…???`???…ˇ????L??…R???”′?‰?‰”?
`?…
<="://..////1.4.4/..">?′?‰????′?????ˉ??ˇ??ˇ?”??‰?′???ˉ???‰`?ˉ—?”?ˉ—?”??‰ˉ??′?‰??
<="://..///./1.1.4/-.">?′?‰????′?????ˉ??′…ˉ?′???ˉ???‰`??…”??′??”ˉ??…”??′??”?‰ˉ??′?‰??
<="://..//-.">?′?‰????′????…?′??”?′???…ˇ‰???`′??`?′?`?”`?′?`?”?‰ˉ??′?‰??
<>?′?‰??
(($){?′?‰?
//Backbone中的router见名意router有路由的意思显?这?控制url的。
//Backbone.Router会?连接中的#??当做url路径
/
//1、来一?的例子
=..({????R???”??′?`?”R???”?”??”…
:{????”?
"":""?′?‰??…”????R???”
20
Blog:http://www.the5fire.net共享、交流、提高
},
:(){…”????R???”?′?‰??′?‰??
();??”???′?‰??
}
});
_=;?????????”?”??R???”?
..();?′?`?”?‰?????????
//2、?url进行匹配那?应￥???的静态匹配应具有递数的功能所?
下面再来一??态的router的例子.
=..({????R???”??′?`?”R???”?”??”…
:{????”?
"//:":"",?????‰…ˇ”?·???
"":""?′?‰??…”????R???”
},
:(){ˇ”?·????′?‰?‰…
();??”??‰…
},
:(){…”????R???”?′?‰??′?‰??
();??”???′?‰??
}
});
_=;?????????”?”??R???”?
..();?′?`?”?‰?????????
/
//?面已?可?匹配#??之内容的方法有：一用“:”来?#面的应的位置作
数；fi有一“”?可?匹配所有的url下面再来演练一下。
=..({????R???”??′?`?”R???”?”??”…
:{????”?
"//:":"",?????‰…ˇ”?·???
"//":"",…????…????…????…F‰?”
//面应的链接<="#////.">???”…????…??”?‰??ˇ”??”ˇ‰…????…ˇ‰?
"/:/:":"",????”?′?‰????…‰”
21
Blog:http://www.the5fire.net共享、交流、提高
//面应的链接<="#//">/???”…???`???…ˇ????L??…R???”′?‰?‰”?
"":""?′?‰??…”????R???”
},
:(){ˇ”?·????′?‰?‰…
();??”??‰…
},
:(){…”????R???”?′?‰??′?‰??
();??”???′?‰??
},
:(){…????…F‰?”?′?‰?????
();////.??”????????”?‰??ˇ”??”ˇ‰
},
:(,){???…‰”?′?‰?????”?′?‰?
(+"_"+);//_??”??????”?′?‰?…???`???…ˇ????
}
});
_=;?????????”?”??R???”?
..();?′?`?”?‰?????????
})();ˉ??”?
?′?‰??
????
6、backbone中的view实例
作者：胡阳
本文链接:http://www.the5fire.net/6-backbone-view.html
Backbone的view用来显示的model中的数据页面的同§?可用来监听DOM
的?件?做响应。
?给一?页面的体?fl下面的所有试验?fl??这面：
22
Blog:http://www.the5fire.net共享、交流、提高
fl–??·????
5--??”‰?”`?′?`?”‰”
<`?…>
<…‰‰…="_"?”??′?′???‰”?>
<%=_%>
<‰?????”=""?”??‰…="_"?”??′?‰???/>
<‰?????”=""`????‰…="_"?”??′?`???????”=""S”??′?/>
(($){?′?‰?
//ˇ处添加下面的试验?fl
})();ˉ??”?
1、一?的view
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??(''''‰‰??S”??′?‰”);
}
});
???”??′?‰”=”S”??′?‰”();
￥?￠没有技术含a所有的?块定义?一样。
2、el属性
23
Blog:http://www.the5fire.net共享、交流、提高
这?属性用来引用DOM中的一??每一?Backbone的view?会有这?属性
如果没有显示声明Backbone会默认的一?示一?空的div?
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
??”??(''''‰‰??S”??′?‰”);
}
});
???”??′?‰”=”S”??′?‰”({”?:$("#_"?”??′?′???‰”?)});
接着来这?el的应用?注意??中的这???这?定义的一??板。
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
//.();??‰??”…”?
},
?”…”?:?′?‰?(){
//使用?…”??′??”这?库来编译?板
???”?????”=_.?”?????”($("#_"?”??′??”?????”).????(),{});
//加载?板应的”?属性中
??‰?.”?.????(?”?????”);
}
});
???”??′?‰”=”S”??′?‰”({”?:$("#_"?”??′?′???‰”?)});
24
Blog:http://www.the5fire.net共享、交流、提高
.?”??′?‰”?”…”?();//这??”?…”?的方法可?‰”的数中
运行页面之会发script?板中的html?fl已?添加了?定义的div中。
3、再来DOM中??件的绑定￠
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
??‰?.?”…”?();
},
?”…”?:?′?‰?(){
//使用?…”??′??”这?库来编译?板
???”?????”=_.?”?????”($("#_"?”??′??”?????”).????(),{});
//加载?板应的”?属性中
??‰?.”?.????(?”?????”);
},
””??:{//''在这绑定的
''[=]''′?‰′?‰?????”`????:''''…?S”??′?//定义类`????的‰?????的点击?件触发数…?S”??′?
},
…?S”??′?:?′?‰?(””?){
??”??(""?”??′???+$("#_"?”??′?‰???).??());
}
});
25
Blog:http://www.the5fire.net共享、交流、提高
???”??′?‰”=”S”??′?‰”({”?:$("#_"?”??′?′???‰”?)});
运行下￥￠`写$(“input[type=button]“).bind(‘click’,function(){})好
多了吧。
4、view中的?板
如果用过django?板的话应会想前面提的?板和django?板￥有同样的
功能??板那''应能入数据。
没错了这?和django的使用一样可?在?板中定义变a?通过的方式递进
注意script?板的变化
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
??‰?.?”…”?();
},
?”…”?:?′?‰?(){
//使用?…”??′??”这?库来编译?板
???”?????”=_.?”?????”($("#_"?”??′??”?????”).????(),{_?”??′???`”?:"5"??”‰?”?”??′?});
//加载?板应的”?属性中
??‰?.”?.????(?”?????”);
},
””??:{//''在这绑定的
''[=]''′?‰′?‰?????”`????:''''…?S”??′?//定义类`????的‰?????的点击?件触发数…?S”??′?
},
…?S”??′?:?′?‰?(””?){
26
Blog:http://www.the5fire.net共享、交流、提高
??”??(""?”??′???+$("#_"?”??′?‰???).??());
}
});
???”??′?‰”=”S”??′?‰”({”?:$("#_"?”??′?′???‰”?)});
再运行有木有?这?dom的操作fi￠好玩的。别激?再来稍微扩展一下。
于实际应用来说页面数据的变化需?同服务器端最想的方法?回变化的数据
''ok?修改页面应的数据￥刷新页面。
S”??′?‰”=.?′?`?”‰”.”??”…({
‰‰?‰??‰”:?′?‰?(){
??‰?.?”…”?(''5''??”‰?”);
},
?”…”?:?′?‰?(_?”??′???`”?){
//使用?…”??′??”这?库来编译?板
???”?????”=_.?”?????”($("#_"?”??′??”?????”).????(),{_?”??′???`”?:_?”??′???`”?});
//加载?板应的”?属性中
??‰?.”?.????(?”?????”);
},
””??:{//''在这绑定的
''[=]''′?‰′?‰?????”`????:''''…?–??ˇ”
},
27
Blog:http://www.the5fire.net共享、交流、提高
…?–??ˇ”:?′?‰?(””?){
//通过??…”?发送数据服务器
??‰?.?”…”?(''5''??”‰?”+$("#_"?”??′?‰???).??());
}
});
???”??′?‰”=”S”??′?‰”({”?:$("#_"?”??′?′???‰”?)});
这一?`′牵强的例子?如果加model的使用效果''会好￠多通过view和
model可?使业务和数据真正的分离。
总之view的–?应用''绑定?件处业务渲染页面。
7、backbone实例todos分析（一）
作者：胡阳
本文链接:http://www.the5fire.net/7-backbone-todos-1.html
?过前面的几篇文章backbone中的modelcollectionrouterview?的讲
了一下??这几篇文章应达的水平者说??达的目的''：已?能·在的
web?目者平§的练中用的backbone了。
实于一?web开发老来说基本前面的内容已?可??backbone的使用
和的开发?验结?来进行应用了?想更进一的话需?backbone的官方文?者
官方实例。
这?''backbone官的实例todos进行下分析?人的写来应
能·?backbone的特性发挥的淋漓致并且?fl应足·优秀的￥?会来?
。
好了话这多下面开始正题。Todos的?fl这下载：
https://github.com/documentcloud/backbone/
?应来下功能：
28
Blog:http://www.the5fire.net共享、交流、提高
?这?界面?可?总结来这?Todos有哪?功能：
1、添加务。
2、修改务（内容状态）。
3、删除务。
4、务情况计。
总体''这四?功能。
这??目??在web端运行的没有服务器进行支持所??目中使用了一?叫做
backbone-localstorage的js库用来?数据存前端。
“backbonemvc?式据这?式的使用?验?应?分析数据?开始。
当?可??地方入。
这?显?可??的源?fl的所??接来model：
/
基本的??…??属性：,,′??”???…”?…?”。
/
29
Blog:http://www.the5fire.net共享、交流、提高
????…?=.?′?`?”?…”?.”??”…({
//设置默认的属性
…”?????:{
′??”?:"..."”?????…?,
…?”:???”
},
//确保每一?′??”??￥空
‰‰?‰??‰”:?′?‰?(){
‰(!??‰?.ˇ”?(""′??”?)){
??‰?.?”?({""′??”?:??‰?.…”?????.′??”?});
}
},
//将一?务的状态置状态
??ˇˇ?”:?′?‰?(){
??‰?.??”({…?”:!??‰?.ˇ”?(""…?”)});
},
//???′??S????ˇ”中删除一?目
′?”??:?′?‰?(){
30
Blog:http://www.the5fire.net共享、交流、提高
??‰?.…”????();
}
});
这?fl￠好的￥过?依?添足的加了一?注释。这?Todo显?''应页
面的每一?务目。那显?应有一?collection来（?）所有的务所?再来
collection：
/
??…?的一??数据通过??′??S????ˇ”存在本地。
/
????…?L‰??=.?′?`?”–???”′?‰?.”??”…({
//设置–???”′?‰?的???…?
??…”?:??…?,
//存本地?-??…??`?′?`?”命名的空currency1中
??′??S????ˇ”:”S???”("-"??…??`?′?`?”),
//获取所有已?的务数组
…?”:?′?‰?(){
?”?????‰?.‰??”?(?′?‰?(??…?){?”???.??…?ˇ”?(''''…?”);});
},
//获取务列中的务数组
?”??‰‰ˇ:?′?‰?(){
?”?????‰?.‰?????.????(??‰?,??‰?.…?”());
31
Blog:http://www.the5fire.net共享、交流、提高
},
//获下一?务的序序通过数据库中的记录数加1实。
”???…”?:?′?‰?(){
‰(!??‰?.?”ˇ??)?”???1;
?”?????‰?.????().ˇ”?(''''??…”?)+1;
},
//?′?`?”内置数据??…?的加入序进行列
′?????????:?′?‰?(??…?){
?”???.??…?ˇ”?(''''??…”?);
}
});
collection的–?功能有?下几?：
1、序存Todo;
2、获取的务数目;
3、获取的务数目;
4、获取下一??入数据的序。
这面有三?新的数需?释下：
一?comparator这backbone的内置数作用''collection中数据的
序依据。文?这：http://documentcloud.github.com/backbone/#Collection-
comparator
二?获取务数目§调用的this.filter这?数?underscore的内置数
作用遍当前?过中指定内容True的并将这?数组中返回。
32
Blog:http://www.the5fire.net共享、交流、提高
文?：http://documentcloud.github.com/underscore/#filter
三?获取务数据调用的this.without.apply(this,this.done())这?数
withoutunderscore面的数。面的那?applyjavascript的内置数作用
?当前的下文入数中。这?fl的意思实''?this（''collection中）除已?
的务（this.done()）,返回数组。：
http://stackoverflow.com/questions/9137398/backbone-js-todo-collection-what-
exactly-is-happening-in-this-return-stateme
这篇文章分析这下篇文章分析。
8、backbone实例todos分析(二)view的应用
作者：胡阳
本文链接:http://www.the5fire.net/8-backbone-todos-2.html
在一篇文章中??todos这?实例的数据?进行了的分析有关于数据?的操作
?了。接着?来下的?view的??及?页面的操作。
??分析下这?view用来的。的想法一?页面的操作?接用一?
view来定￥''行了??用?
??这''新和老的–?别之一欢在一?方法面定一着§currency1的移再
重??fl变?￠可扩展。???￡一??的?fl''应￥取中的?华。
??这面的?华''将数据的展示和数据的操作进行分离''在?fl面
TodoView和AppView。前者的作用展示数据?中的数据界面并数据本§进行?;者
整体的一?控制如所有数据的显示（调用TodoView）添加一?务、计多?务currency1。
有了面的分析??来一下?fl：
//?创建一?''的??…?的′???”′?‰?
????…??=”??…?L‰??;
//来??…?‰”作用控制务列
????…?‰”=.?′?`?”‰”.”??”…({
//下面这???的作用??”?????”?板中获取的?????fl这??中。
33
Blog:http://www.the5fire.net共享、交流、提高
??ˇ“??”:""?‰,
//获取一?务目的?板
?”?????”:_.?”?????”($(''#-''‰?”??”?????”).????()),
//每一?务目绑定?件
””??:{
"."′?‰′?′?”′?:""??ˇˇ?”fl?”,
".-"…`?′?‰′???`”???…?′??”?:""”…‰?,
".-"′?‰′??????…?…”????:""′?”??,
".-"?”??”????…?‰???:""??…??”?”?,
".-"`?????…?‰???:""′???”
},
//在初始化设置了??…?‰”和??…?的?一一引用这?可????…?‰”作??…?在界面的。
‰‰?‰??‰”:?′?‰?(){
_.`‰…??(??‰?,''''?”…”?,''''′???”,''''?”??”);
??‰?.??…”?.`‰…(''''′??ˇ”,??‰?.?”…”?);
??‰?.??…”?.`‰…(''''…”????,??‰?.?”??”);//这??”??”‰”的中的方法用来?除页面中的…??
},
//渲染??…?中的数据-‰?”??”?????”中?返回的引用??‰?
?”…”?:?′?‰?(){
$(??‰?.”?).????(??‰?.?”?????”(??‰?.??…”?.???S“()));
??‰?.‰???=??‰?.$(''.-''??…?‰???);
?”?????‰?;
},
//控制务者
??ˇˇ?”fl?”:?′?‰?(){
??‰?.??…”?.??ˇˇ?”();
},
//修改务目的样式
”…‰?:?′?‰?(){
$(??‰?.”?).?……–????(""”…‰?‰ˇ);
??‰?.‰???.?′??();
},
34
Blog:http://www.the5fire.net共享、交流、提高
//关?编辑界面并?修改内容同界面
′???”:?′?‰?(){
??‰?.??…”?.??”({′??”?:??‰?.‰???.??()});//会触发′??ˇ”?件
$(??‰?.”?).?”??”–????(""”…‰?‰ˇ);
},
//下回fi之关?编辑界面
??…??”?”?:?′?‰?(”){
‰(.”?”–?…”==13)??‰?.′???”();
},
//移除应目?及应的数据
′?”??:?′?‰?(){
??‰?.??…”?.′?”??();
}
});
//再来??‰”功能显示所有务列显示整体的列状态（如：多?多?）
//?及务的添加。–?整体的一?控制
????‰”=.?′?`?”‰”.”??”…({
//绑定页面–?的fl点
”?:$("#"??…????),
//在显示的计数据?板
??????”?????”:_.?”?????”($(''#-''??????”?????”).????()),
//绑定…??点的?件
””??:{
"#-"?”??”??”??…?:""′?”??”?”?,
"#-"?”??”??…?:""????????‰?,
".-"′?‰′???…?′?”???:""′?”??–????”?”…,
".--"′?‰′????????…?”:""??ˇˇ?”??–????”?”
},
//在初始化过程中绑定?件??…??当务列改变§会触发应的?件。最?存在??′??S????ˇ”中
的数据取来。
35
Blog:http://www.the5fire.net共享、交流、提高
‰‰?‰??‰”:?′?‰?(){
//下面这??…”??′??”库中的方法用来绑定方法目前的这?中了在?运行环境中调用当前
的§能·中的这?方法。
_.`‰…??(??‰?,''''?……”,''''?……??,''''?”…”?,''''??ˇˇ?”??–????”?”);
??‰?.‰???=??‰?.$("#-"”??…?);
??‰?.???–?”′?`??=??‰?.$(".--"???????…?”)[0];
.??…??`‰…(''''?……,??‰?.?……”);
.??…??`‰…(''''?”?”?,??‰?.?……??);
.??…??`‰…(''''???,??‰?.?”…”?);
.??…??”?′?();
},
//更改当前务列的状态
?”…”?:?′?‰?(){
??…?”=.??…??…?”().?”ˇ??;
???”??‰‰ˇ=.??…???”??‰‰ˇ().?”ˇ??;
??‰?.$(''#-''??…??????).????(??‰?.??????”?????”({
?????:.??…???”ˇ??,
…?”:…?”,
?”??‰‰ˇ:?”??‰‰ˇ
}));
//据fl多?确定?记的′?”′?`??的显示
??‰?.???–?”′?`??.′?”′?”…=!?”??‰‰ˇ;
},
//添加一?务页面‰…-??…??‰??的/…‰??中
?……”:?′?‰?(??…?){
??‰”=”??…?‰”({??…”?:??…?});
??‰?.$("#-"??…??‰??).???”…(.‰”?”…”?().”?);
},
//???…??中的所有数据渲染页面,页面加载的§用
?……??:?′?‰?(){
.??…??”?′?(??‰?.?……”);
},
36
Blog:http://www.the5fire.net共享、交流、提高
//一?新??…?的所有属性的
”???‰`??”?:?′?‰?(){
?”???{
′??”?:??‰?.‰???.??(),
??…”?:.??…??”???…”?(),
…?”:???”
};
},
//创建一?务的方法使用.`?′?`?”′???”′?‰?的′?”??”方法。将数据保存,??′??S????ˇ”这一?5????
的ˉ?库。需?–器支持5????才能用。
′?”??”?”?:?′?‰?(”){
‰(.”?”–?…”!=13)?”???;
.??…??′?”??”(??‰?.”???‰`??”?());//创建一?之会在`?′?`?”中?态调用??…??的?……方法方
法已绑定?……”。
??‰?.‰???.??('''');
},
//掉所有已?的务
′?”??–????”?”…:?′?‰?(){
_.”?′?(.??…??…?”(),?′?‰?(??…?){.??…?′?”??();});
?”??????”;
},
//用??入新务的§提示·§1?
//处逻辑：?获取??的提示点的引用?获取用??入的
//判断?有设置显示的·§如果有删除?再设置“这??件”的?”??§发的所
?方法会?连调用。
????????‰?:?′?‰?(”){
???????‰?=??‰?.$(".--"?‰?????‰????);
????=??‰?.‰???.??();
.?????‰??…”??();
‰(??‰?.?????‰??‰?”???)′?”???‰?”???(??‰?.?????‰??‰?”???);
‰(??==''''||??==??‰?.‰???.????(''''???′”???…”?))?”???;
?????=?′?‰?(){.?????‰????().?…”();};
??‰?.?????‰??‰?”???=_.…”??(???,1000);
},
37
Blog:http://www.the5fire.net共享、交流、提高
//处页面点击?记…
//处逻辑：如果?记…已‰所有?如果‰所有的?。
??ˇˇ?”??–????”?”:?′?‰?(){
??…?”=??‰?.???–?”′?`??.′?”′?”…;
.??…??”?′?(?′?‰?(??…?){.??…???”({''''…?”:…?”});});
}
});
通过面的?fl?及中的注释?应认识了中的?数的作用。?有一点没有说
的template这?。
在前几篇的view中?已?认识过了的?板使用?及变a数的递：
<%=_?”??′???`”?%>
<‰?????”=""?”??‰…="_"?”??′?‰???/>
<‰?????”=""`????‰…="_"?”??′?`???????”=""S”??′?/>
?能定义变a那''能使用?法如同django?板那来下有?法的?板面
的?view用的?板?想这?￠好的。
<…‰′????="<%=?'''':''''%>"??…?…?”…?”>
<…‰′????=""…‰????>
<‰???′????=""′?”′???”=""′?”′?`??<%=…?”?''=""''′?”′?”…′?”′?”…:''''%>/>
<%=′??”?%>
<…‰′????=""”…‰?>
38
Blog:http://www.the5fire.net共享、交流、提高
<‰???′????="-"??…?‰?????”=""?”?????”="<%=%>"′??”?/>
<%‰(?????){%>
<%=?”??‰‰ˇ%>
<%=?”??‰‰ˇ==1?''''‰?”?:''''‰?”??%>.?”?
<%}%>
<%‰(…?”){%>
–?”??<%=…?”%>
′????”?”…<%=…?”==1?''''‰?”?:''''‰?”??%>
39
Blog:http://www.the5fire.net共享、交流、提高
<%}%>
的?法面的那?应TodoView。
这一篇文章''ˇ文章中?了在todos这?实例中view的使用?及具体的
TodoView和AppView中?数的作用这意`着所有的′和o?已??了下面''
如??下的a题了。
下一篇?一来todos的整?流程。
9、backbone实例todos分析（三）总结
作者：胡阳
本文链接:http://www.the5fire.net/9-backbone-todos-3.html
在前篇文章中?已?这?todos的功能、数据??及??块的实细进行了分
析这篇文章??前面的分析进行一?整?。前面?说过有了′和o下的''?怎?。
??人ˉ向于o和′一?这样￥会??
???来回˙一下?分析的流程：页面功能进行了分析?分析了数据?最
view的功能和?fl进行了详。￥?这?分析面?了点什没错了''?验
丰富的已?来了这面?了于流程的分析。
所???的分析中可?的来??”¨?进行分析?再整体的分析（当?前提
?流程的）这并￥分析?fl的唯一方法有§?会采用着流程分析?fl的方法。当?
fi有￠多的分析方法?的套路。
下面的说说流程分析的方法。记多年前在vb的§分析一?整?目?fl的§
??程序的入口点开始分析。ˉ?webfi和?面件的实￥同?致思路一样的（同§
有fi即件的说法在RESTful架中）。所???fi的入口点所在。
和?面应用?目的分析一样fi的入口点''在于页加载的§。于todos?''加载
所有的务。所?应着?''可?发这?fl
?AppView的一?实例化：
????=”??‰”;
40
Blog:http://www.the5fire.net共享、交流、提高
实例化?''会调用数：
//在初始化过程中绑定?件Todos当务列改变§会触发应的?件。最?存在
localStorage中的数据取来。
:(){‰‰?‰??‰”?′?‰?
//下面这?underscore库中的方法用来绑定方法目前的这?中了在?运行环境
中调用当前的§能·中的这?方法。
_.(,'''','''','''','''');`‰…????‰??……”?……???”…”???ˇˇ?”??–????”?”
.=.$("#-");??‰?‰?????‰?”??…?
.=.$(".--")[0];??‰????–?”′?`????‰????????…?”
.('''',.);??…??`‰…?……??‰??……”
.('''',.);??…??`‰…?”?”???‰??……??
.('''',.);??…??`‰…?????‰??”…”?
.();??…??”?′?
},
注意中的Todos.fetch()方法前面说过这??目在?端保存数据所?使用fetch
方法并￥会发送求服务器。另外在前面关于collection的?讲中?了collection
中调用fetch方法之''会触发reset这?方法。所?在流程?向reset——>addAll这?方法。
来addAll这?方法：
//添加一?务页面idtodo-list的div/ul中
:?……”?′?‰?(??…?){
??‰”=”??…?‰”({:??…”???…?});
.$??‰?("#-"??…??‰??).???”…(.‰”?”…”?().”?);
},
//???…??中的所有数据渲染页面,页面加载的§用
:?……???′?‰?(){
.??…??”?′?(.??‰??……”);
},
在addAll中调用addOne方法关于Todos.each￠好''?法ˇ（化的for—
环）ˇ加载页面的整?流程''了。关于addOne方法的细下面。
?再来添加务的流程一?好的?fl命名始?人心欢的。“￠显?添
加一?务?''addOne,实events中的绑定能一下绑定：
//绑定dom点的?件
:””??{
"#-"?”??”??”??…?:""′?”??”?”?,
41
Blog:http://www.the5fire.net共享、交流、提高
"#-"?”??”??…?:""????????‰?,
".-"′?‰′???…?′?”???:""′?”??–????”?”…,
".--"′?‰′????????…?”:""??ˇˇ?”??–????”?”
},
这并没有addOne方法的绑定?却有createOnEnter?意实一样的另外这
实?说下关于showTooltip这?方法在务?入框中”弹的§执行这?方法具体?fl
有详细的注释了这￥多。
来–createOnEnter这?方法：
//创建一?务的方法使用backbone.collection的create方法。将数据保存
localStorage,这一?html5的js库。需?–器支持html5才能用。
:′?”??”?”??′?‰?(”){
‰(.”?”–?…”!=13)?”???;
.??…??′?”??”(.??‰?”???‰`??”?());//创建一?之会在`?′?`?”中?态调用??…??的?……方法方
法已绑定?……”。
.??‰?‰???.??('''');
},
注释已写明Todos.create会调用addOne这?方法。由ˇ章的来addOne面：
//添加一?务页面‰…-??…??‰??的/…‰??中
:?……”?′?‰?(??…?){
??‰”=”??…?‰”({:??…”???…?});
.$??‰?("#-"??…??‰??).???”…(.‰”?”…”?().”?);
},
在面实例化了一?TodoView类前面?说过这?类–??务的显示的。具体?
fl''￥细说了。
有了添加再来更新关于?务的操作??接TodoView''ok了。所??接
//.??”fl””????”′‰‰′???‰?”?
””??:{
"."′?‰′?′?”′?:""??ˇˇ?”fl?”,
".-"…`?′?‰′???`”???…?′??”?:""”…‰?,
".-"′?‰′??????…?…”????:""′?”??,
".-"?”??”????…?‰???:""??…??”?”?,
".-"`?????…?‰???:""′???”
},
中的edit?件的绑定''更新的一?开updateOnEnter''更新的具体?作。所
????这方法的作用一''明了了。这同样￥用细说。
42
Blog:http://www.the5fire.net共享、交流、提高
在fi有删除一记录?及?已有记录的功能据面的分析过程?想?￠容￥的
?。
关于Todos的分析ˇ''了?注释过的整??fl在github：
https://github.com/the5fire/the5fire-todos供。
在下一篇文章中?将一来通过django来搭建web服务器?及的数据库。
10、django开发环境搭建及使用
作者：胡阳
本文链接:http://www.the5fire.net/10-django-dev-env.html
django基于python的一?框架“ˇ在ˇ之前?python环境关于python环
境的搭建前面已写过这：http://www.the5fire.net/python-env.html。有了
python环境接着''?开始django了。
在正式开始之前?一下django的开发环境哪?：
?1、django的安装
?2、mysql安装【非必须，本篇会提及】
?3、apache安装【非必须】
另外–?了和一使用django来作todos的服务器端“ˇfi的下如?
使用django来开发。
正式开始django可谓相当这：
http://www.djangoproject.com/download/1.3.1/tarball/?用的django版本
1.3.1的可?行‰。
下载下来之通过命行进入Django-1.3.1目录中执行：pythonsetup.pyinstall
即可（于ubuntu用?可能需?加sudo）。在命行中?入django-admin有木有提示如果
没有需?应的C:/python2.7/Scripts中有没有一?django-admin.py文件如果
有需??这?目录系环境变a中。
再来mysql的?于todos这??目￥会用mysql
于windows用?相?在mysql数据库?下载应的
MySQL-python-1.2.3.win32-py2.7文件mysql?应的mysql-
python文件。
43
Blog:http://www.the5fire.net共享、交流、提高
于ubuntu用?需??下操作：
1、mysql
sudoapt-getinstallmysql-server
sudoapt-getinstalllibmysqld-dev
sudoapt-getinstlallibmysqlclient-dev
sudoapt-getinstalllibmysqld-dev
sudoapt-getinstalllibmysqlclient-dev
sudoapt-getinstalllibmysqlclient-dev
2、配置mysql和python
sudoapt-getinstallpython-mysqldb
可???前的一篇文章：http://www.the5fire.net/python-opt-mysql.html
aˇ环境的搭建''了的运用一下。
?一?地方创建一?应用命：django-admin.pystartprojecttodos?
会发已?有了一?todos文件在执行命的文件中。这''一?todos程了
todos中执行pythonmanage.pyrunserver命行会?django版本?及服务器
url。在–器中a''了。如下页面：
这篇文章了django的和mysql的?及django的使用。下一篇''
开始?前面分析过的todos修改一?需?同web服务器交互的一?程序。
11、backbone实例todos扩展+web服务器
作者：胡阳
本文链接:http://www.the5fire.net/11-backbone-todos-djangowebserver.html
44
Blog:http://www.the5fire.net共享、交流、提高
在7的§?backbone的功能进行了分析建立了web端的model。在本
中?将”的todos进行扩展使能·将数据存server端的数据库中。这?使用的
django+sqlite来进行实。
在?应应着建立server端的model。￥过在ˇ之前了方￥??django的?
?的写下开发过程：
1、创建程
据一篇中的django的环境和使用创建一?程:django-admin.py
startprojecttodos?在cdtodos文件中：pythonmanage.pystartapptodo
创建一?应用（?作?块行）。
2、配置文件
在todos目录的settings中–?数据配置：
DATABASES={
‘default’:{
‘ENGINE’:‘django.db.backends.sqlite3′,#Add‘postgresql_psycopg2′,‘postgresql’,
‘mysql’,‘sqlite3′or‘oracle’.
‘NAME’:‘D:/mytodos’,#Orpathtodatabasefileifusingsqlite3.
‘USER’:”,#Notusedwithsqlite3.
‘PASSWORD’:”,#Notusedwithsqlite3.
‘HOST’:”,#Settoemptystringforlocalhost.Notusedwithsqlite3.
‘PORT’:”,#Settoemptystringfordefault.Notusedwithsqlite3.
}
}
整的配置最o来供。
有了面的一?开始创建model。
?开todo文件中的models.py文件写入?下?fl：
???.…ˉ?ˇ?…`‰???????…”??
′??????…?(.??…”???…”?):
′??”?=.??…”??–???F‰”?…(_????”ˇ??=128)
45
Blog:http://www.the5fire.net共享、交流、提高
…?”=.??…”??–???F‰”?…(_????”ˇ??=1,…”????=''''“)#?示“示
??…”?=.??…”???”ˇ”?F‰”?…(`???=???”)
?再来创建views?fl关于django的mvc?式这￥着操作进行。在
todo下新建一?views_todos.py文件。
这?views_todos文件用来操作数据库的所有?fl所在。关于数据库的操作实''
CRUD（create加requestupdate更新delete删除）在django的基
￠好写。
这?fl：
#=-8′?…‰ˇ??
''''''
:?????????ˇ
:2012-3-26…??”
:://5.`??ˇ??????”‰?””?
''''''
?????…”??‰???????…?
???.…ˉ?ˇ?????‰?????˙???R”????”
???.…ˉ?ˇ??????′???‰?????__?”…”????”????”
???.…ˉ?ˇ???‰??‰??????‰???”ˉ??
''''''
??`?‰′
@…”?′加载??…??页
@?????
@?”????”?????”?
''''''
…”‰…”?(?”—?”??):
?”???__?”…”????”????”(''/.''??…???…??????,{})
''''''
??`?‰′
@…”?′控制创建和读取方法的一?跳转
@?????
@?”???
''''''
…”_′?????′?(?”—?”??):
‰.?”—?”???”???…==''''·S?:
46
Blog:http://www.the5fire.net共享、交流、提高
?”???′?”??”(?”—?”??)
”?‰.?”—?”???”???…==''''?:
?”???ˇ”???(?”—?”??)
”??”:
?”???˙???R”????”(''
?′′”??…”
'')
''''''
??`?‰′
@…”?′控制更新和删除方法的一?跳转
@????????中的??…?‰…
@?”???
''''''
…”_′??????…(?”—?”??,_??…?‰…):
‰.?”—?”???”???…==''''·??:
?”?????…??”(?”—?”??,_??…?‰…)
”?‰.?”—?”???”???…==''''flL?:
?”???…”?”?”(?”—?”??,_??…?‰…)
”??”:
?”???˙???R”????”(''
?′′”??…”
'')
''''''
????”′?
@…”?′获取所有的??…?并转ˉ??式返回
@?????
@?”???ˉ??式的??…?列
''''''
…”ˇ”???(?”—?”??):
??…??=.??…??`ˉ”′??.???()
_??…?…‰′?=[]
_??ˇ…‰′?={''''?:???”,''''“:F???”}
????…?‰:??…??
_.??…?…‰′????”…({''''‰…:.??…?‰…,''''′??”?:.??…?′??”?,''''…?”:_??ˇ…‰′?[.??…?…?”],''''??…”?:.??…???…”?})
?”???˙???R”????”(.?‰???”ˉ??…????(_??…?…‰′?),?‰?”??”=''/''????‰′??‰?ˉ??)
47
Blog:http://www.the5fire.net共享、交流、提高
''''''
????”′?
@…”?′创建一???…?记录
@?????·S?中的ˉ??式??…?
@?”???ˉ??式{'''':/}??′′”?????”F???”
''''''
…”′?”??”(?”—?”??):
?”—=.?‰???”ˉ?????…?(.?”—?”??__??????…???)
′??”?=?”—[''''′??”?]
??…”?=?”—[''''??…”?]
‰??:′??”?
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:F???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
??…?=??…?()
.??…?′??”?=′??”?
.??…???…”?=??…”?
.??…???”()
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
''''''
????”′?
@…”?′更新一??…?记录
@?????·S?中的ˉ??式??…?
@?”???ˉ??式{'''':/}??′′”?????”F???”
''''''
…”??…??”(?”—?”??,_??…?‰…):
?”—=.?‰???”ˉ?????…?(.?”—?”??__??????…???)
′??”?=?”—[''''′??”?]
…?”=?”—[''''…?”]
??…”?=?”—[''''??…”?]
_??ˇ…‰′?={???”:''''?,F???”:''''“}
??…?=.??…??`ˉ”′??.ˇ”?(‰…=_??…?‰…)
.??…?′??”?=′??”?
.??…?…?”=_??ˇ…‰′?[…?”]
.??…???…”?=??…”?
.??…???”()
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
48
Blog:http://www.the5fire.net共享、交流、提高
''''''
????”′?
@…”?′删除一??…?记录
@????????中的??…?‰…
@?”???ˉ??式{'''':/}??′′”?????”F???”
''''''
…”…”?”?”(?”—?”??,_??…?‰…):
.??…??`ˉ”′??.ˇ”?(‰…=_??…?‰…).…”?”?”()
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
面的?fl中除了有CRUD?fl之fi有?重?的数：control_cr和control_ud
?名￠容￥来前者控制创建和的者控制更新和删除的。什这写”“
在于使用backbone在web端进行CRUD操作的§应的url并￥一样“ˇ?写了?
数。
在control_cr中据GET和POST来判断fi创建在control_ud中
据PUST和DELETE来判断更新fi删除。
面?fl中数''￥详了?￠的?句。
??需?做的''配置url在todos下面的那?urls.py文件中的配置如下：
???.…ˉ?ˇ?′?.????.…”?????‰?????????”??,‰′??…”,???
‰??????”??‰ˇ?
?????…?‰?????_‰”???…??
???????”??=????”??('''',
(?''^_/(?.)$''?‰?”?”…‰?·,''...''…ˉ?ˇ?‰”?????‰′?”?”,{''_''…?′??”?????:
.?”??‰ˇ?__S??–fl–R?,''_''???‰…”?”?:F???”}),
(?''^//$''??…?′?????,_.‰”???…??_′?????′?),
(?''^//(\)$''??…?′?????…,_.‰”???…??_′??????…),
#例如：://127.0.0.1:8000///1/??????…?′?????·??''更新flL?''删除
(?''^'',_.‰”???…??‰…”?),
)
当?web端??接使用前面分析过的todos的?需?修改一下中的?fl。
?1、在Todo的模型中加入：urlRoot:‘/todo/control/’
49
Blog:http://www.the5fire.net共享、交流、提高
?2、在collectionTodoList中加入：url:‘/todo/control/’，并且去掉：localStorage:
newStore(“todos-backbone”),
这样就ok了。在django项目中还需要配置site_media和templates文件，结构如下：
?用的KomodoEdit这?IDE来开发的。??这样的结来建立文件和文件''行
了。
最给settings的所有?fl：
#.flˉ?ˇ??”??‰ˇ????”??`?′?`?”???ˉ”′?
fl?=???”
_?·L?fl?=fl?
fl“S=(
#('''',''_@.''),????“??”???”??‰?”?????”′??
)
“RS=fl“S
50
Blog:http://www.the5fire.net共享、交流、提高
fl?SS={
''''…”????:{
''''““:''...3''…ˉ?ˇ?…``?′?”…??—?‰?”,#''_2'','''','''',''3''……????ˇ?”?—???′??ˇ????ˇ?”?—???—??—?‰?”??
''''.???′?”
''''“:'':/''fl???…??,#3.???????…???`??”‰?”‰??‰ˇ?—?‰?”
''''?SR:'''',#3.“????”…‰???—?‰?”
''''·SS¨Rfl:'''',#3.“????”…‰???—?‰?”
''''˙S?:'''',#.3.S”???”??????‰ˇ????′??????“????”…‰???—?‰?”
''''·R?:'''',#.3.S”???”??????‰ˇ??…”????“????”…‰???—?‰?”
}
}
#.:L?′???‰?”?”????‰?‰???????‰?–??‰′”?′?`”??…?”?”
#://..//_____????”‰?‰?”…‰???ˇ‰?‰L‰?????”?`??”
#.??????ˇ??????′??‰′”???`”??‰??`?”??????”???‰ˇ???”??
#,?‰????”??????”?“?”‰??′???”flˉ?ˇ?????”??”???”
#.?‰?”?”????”??”???‰ˇ???”?
#??‰ˇ‰?¨‰…??”‰???”???‰?????`”?”?????”???”?????
#.???”??‰?”?”
_?“=''/''?”?‰′?–?‰′?ˇ?
#.:L?ˇ??ˇ”′?…”????‰?‰???????‰???′??‰′”?′?`”??…?”?”
#://.18.//-.????‰ˇ?′???‰′?…”??ˇ??ˇ”‰…”?‰‰”??????
_L“?–fl=''-''”??
_S?fl=1
#,???”???‰???F???”flˉ?ˇ?‰?????”???”???‰?‰??‰????????
#.?????…??”‰?”???‰???‰??‰???′?‰”?
_18?S“=???”
#,,???”???‰???F???”flˉ?ˇ?‰?????????…??”???`”???…
#′??”…????′′??…‰ˇ????”′???”???′??”
_10?SL“=???”
#-.`?????”‰?”???”?????????”…‰?”′???????‰?????…??”??????…”…‰?”?
#:"///..//"?????”???”?”…‰??”…‰????”′”′???”…‰?
51
Blog:http://www.the5fire.net共享、交流、提高
_flR?=''''
#_.?RL??????…?”???”?”…‰??”?”…???flR???”???”????”?
#.???‰?‰ˇ?????
#:"://..//","://.//"?????”??????”…‰????”′”′???”…‰?????”?????”′???”…‰?
_fl?RL=''''
#.`?????”????????”…‰?”′???????‰′‰?”??????…`”′???”′?”…??
#'';fl????????‰ˇ‰??‰?…‰?”′???????”?????”???????‰′‰?”?
#''"/"_.‰????????‰′??`…‰?”′???‰”??…‰S??–FLSflRS
#:"///..//"?????”???”?”…‰??”…‰????”′”′??????‰′
_S??–R?=''./_/''?‰?”?”…‰?
#.?RL??”‰???????‰′‰?”?
#:"://..//"?????”?????”…‰????”′”′??????‰′
_S??–?RL=''/_/''?‰?”?”…‰?
#--,.?RL??”‰????…?‰????‰′‰?”?–SS???S′?‰???…‰??ˇ”?
#.??”???”????”????‰?‰ˇ?????
#:"://.///","///".?????”???????′??????‰′?…?‰????‰′?…?‰
__fl“fl·RF=''///''????‰′?…?‰
#……‰?‰?????′??‰???????‰′‰?”?
_S??–FLSflRS=(
#,"///"":///".·?????‰ˇ??”?”?‰?”???”????????‰′??–…ˉ?ˇ?????‰′
#,.?????”????…?????”?””?¨‰…??
#'',.fl????ˇ”?????”?`?????”????????”???‰”?????
)
#L‰???‰…”?′????”???????????‰…????‰′‰?”?‰
#.??‰?????′??‰??
_S??–FLSF“flRS=(
''....''…ˉ?ˇ?′???‰`????‰′‰?”?‰…”??F‰?”S??”?F‰…”?,
''....''…ˉ?ˇ?′???‰`????‰′‰?”?‰…”????fl‰?”′???‰”?F‰…”?,
#''....'',…ˉ?ˇ?′???‰`????‰′‰?”?‰…”??fl”????S????ˇ”F‰…”?
)
52
Blog:http://www.the5fire.net共享、交流、提高
#,''.??”??‰??‰—?”?……??????”‰?‰???`?…
_S–R???=''4%$10@08!85-8)1549$4049^22#!0''—′??‰?′?”?′ˇ???”
#.L‰???′????`?”???????????‰??????”?????”??????‰???????′”?
_?·L?LflRS=(
''....''…ˉ?ˇ??”?????”???…”??‰?”???”?L??…”?,
''..._.''…ˉ?ˇ??”?????”???…”?????…‰?”′???‰”?L??…”?,
#''....'',…ˉ?ˇ??”?????”???…”??”ˇˇ?L??…”?
)
_flflL¨R–LSSS=(
''...''…ˉ?ˇ??‰……?”??”′????–????‰……?”??”,
''....''…ˉ?ˇ?′???‰`?”??‰???‰……?”??”S”??‰?‰……?”??”,
#''...'',…ˉ?ˇ??‰……?”??”′??–??‰”‰……?”??”
''....''…ˉ?ˇ?′???‰`?????‰……?”??”???”?‰′??‰?‰……?”??”,
''....''…ˉ?ˇ?′???‰`?”???ˇ”??‰……?”??””???ˇ”‰……?”??”,
)
_R??RL–“F=''.''??…??????
‰???????
_?·L?flRS=(
#,"///_"":///".·?????‰ˇ??”?”?‰?”???”????…ˉ?ˇ??”?????”???–…ˉ?ˇ??”?????”?
#,.?????”????…?????”?””?¨‰…??
#'',.fl????ˇ”?????”?`?????”????????”???‰”?????
??.????.ˉ?‰(??.????.…‰???”(____‰?”),''''?”?????”?).?”???′”(''\'',''/''),
)
_=(“S?LLfl··S
#''.…ˉ?ˇ?′???‰`.????'',
#''.…ˉ?ˇ?′???‰`.′??”???”?'',
#''.…ˉ?ˇ?′???‰`.?”??‰??'',
##''.…ˉ?ˇ?′???‰`.?‰?”?'',
#''.…ˉ?ˇ?′???‰`.?”???ˇ”?'',
#''.…ˉ?ˇ?′???‰`.????‰′‰?”?'',
''.??…????…?'',
#:?′???”???””???‰”??”?`?”??”?…?‰
#''.…ˉ?ˇ?′???‰`.?…?‰'',
#:?′???”???””???‰”??”?`?”?…?‰…?′??”???‰?
53
Blog:http://www.the5fire.net共享、交流、提高
#''.…ˉ?ˇ?′???‰`.?…?‰…?′?'',
)
__=''S??–fl–R?./_?‰?”?”…‰?''
#.?????”??ˇˇ‰ˇ′?‰ˇ????‰???”????ˇ‰`?”??ˇˇ‰ˇ
#?”????”…`??‰?′?‰ˇ????‰?‰????”…?”??‰???
#500.??”?‰?”?…?‰??””?˙??·”????
#://..////S””????…?′?…ˉ?ˇ????ˉ”′?′??”…”???‰′???ˇˇ‰ˇ??
#.???”…”??‰???????′?????‰”?????ˇˇ‰ˇ′?‰ˇ????‰?
={L“
''”??‰?'':1,
''__…‰??`?””?‰??‰ˇ??ˇˇ”??'':,F???”
''??…?”??'':{
''_??‰??…?‰?'':{
''?””?'':''RRR'',
''′????'':''.…ˉ?ˇ???‰??.??ˇ.…?‰??‰?˙?…?”?''
}
},
''??ˇˇ”??'':{
''.…ˉ?ˇ??”—?”??'':{
''??…?”??'':[''_??‰??…?‰?''],
''?””?'':''RRR'',
''?????ˇ??”'':,???”
},
}
}
?fl已?github了建议下载运行。
https://github.com/the5fire/the5fire-servertodos
12、backbone实战：webchat（一）功能分析
作者：胡阳
本文链接:http://www.the5fire.net/12-backbone-webchat-1.html
在一中?通过django搭建了webserver端?那?基于已有的todos?fl来
54
Blog:http://www.the5fire.net共享、交流、提高
做的总会??了点什。在最来?开始做一?整的实例来体验一?backbone在开发
过程中的使用。
这?实战?目???叫做webchat（web在?）使用技术''
backbone+django+sqlite。在功能方面没有想的特别￠￡“?目的目的''?能·?
的用backbone。（￥过?过前面的文章?想应已?能?用backbone了）
说下这??的功能￠￥用注?登录：
?1、查看所有聊天记录
?2、说话
功能有了''来设计页面用具的设计一下：
页面￠下一?来进行详细设计?及实这?页面。
13、backbone实战：webchat（二）详细设计
作者：胡阳
本文链接:http://www.the5fire.net/13-backbone-webchat2.html
由一篇的功能?可?需?的实体类?如下：
55
Blog:http://www.the5fire.net共享、交流、提高
:′???
‰…#–”
′??”?#消息
??”???”#??
…??”#消息发送§currency1
这样的一??基本已?足了功能的需求了。
再由一篇中的那?页面设计?进行了实?fl''￥释了。
html：
fl–??·????
5-??”‰?”¨”`–???
<`?…>
<…‰′????=""???>
<…‰′????=""??‰>
<…‰′????=""?”?…>
欢迎?5??”‰?”?当前§currency1：
<…‰′????=""?′?””>
<…‰′????=""??ˇ?‰??”>52012-04-1023:16:00??”‰?”好
<…‰′????=""??ˇ?‰??”>2012-04-1023:16:00???”?好
<…‰′????="_"?”…?”???ˇ”>
<…‰′????=""?”???ˇ”>
<…‰′????=""???>
??：<‰?????”=""‰′???”‰…=""‰′???”/><`?/>
<`????‰…=""?”…>发送消息
56
Blog:http://www.the5fire.net共享、交流、提高
_()?′?‰?????‰?”
{
,,,,,,,;????…??????”′?…?‰??””??????…??”?‰?”
=();??…?”fl??”
=.();”????…?ˇ”?F????”??
=.()+1;??????…?ˇ”????
=.();…??”??…?ˇ”?fl??”
=.();??????…?ˇ”?˙????
=.();?‰??”??…?ˇ”?‰??”?
=.();?”′?…??…?ˇ”?S”′?…?
(‰?‰??”<10)=?‰??”''0''+;?‰??”
(<‰?”′?…10)=?”′?…''0''+;?”′?…
=+?‰?””??"-"++????"-"++…??”""++????":"++?‰??”":"+;?”′?…
$("#"?…??”).();?????‰?”
}
(_,?”??”???????‰?”1000);
?在CSS?fl：
/
:5????????”‰?”
:://.`??ˇ????5??”‰?”.”?
:…??”2012-04-09
/
????{
:???ˇ‰0;
:??……‰ˇ0;
}
`?…{
:???ˇ‰0;
57
Blog:http://www.the5fire.net共享、交流、提高
-:14???‰”??;
}
.???{
-:`?′?ˇ???…′????#264;F–
:‰…??100%;
:800?”‰ˇ????;
}
.??‰{
:‰…??50%;
:???ˇ‰????;
:700?”‰ˇ????;
-:`?′?ˇ???…′????#;
}
.?”?…{
:40?”‰ˇ????;
-:10??……‰ˇ?????;
-:1`??…”?`??????????‰…#000;
-:20???‰”??;
}
.?”?…???{
:???ˇ‰????;
:‰…??????;
}
.?′?””{
:400?”‰ˇ????;
:‰…??????;
-:?”????′????;
:`?′?ˇ???…#;––––––
:2`??…”??????‰…#000;
}
.?′?””.??ˇ?‰??”{
:′????`??”;
Blog:http://www.the5fire.net共享、交流、提高
}
._?”…?”???ˇ”{
-:5???ˇ‰?????;
}
._?”…?”???ˇ”.?”???ˇ”{
:‰…??60%;
????:?”?;
}
._?”…?”???ˇ”.?”???ˇ”?”????”?{
:‰…??100%;
}
._?”…?”???ˇ”.???{
-:10???ˇ‰?‰ˇ????;
-:10???ˇ‰?????;
????:?‰ˇ??;
}
来下界面：
Blog:http://www.the5fire.net共享、交流、提高
界面设计和??有了那应有哪?接口
?功能￠?有?：
?1、说话（say），在此方法中，讲用户输入的内容到。
?2、所有聊天记录（getChatLog）,的内容提出来。
这一''这下一具体实。
14、backbone实战：webchat（三）web端开发
作者：胡阳
本文链接:http://www.the5fire.net/14-backbone-webchat3.html
Blog:http://www.the5fire.net共享、交流、提高
有了前面功能?及整体详细设计下面的开发''变更有目的性了。
着一篇文章的思路?来?javascript?板建立来?板用来取?一篇中html
?fl的：
<…‰′????=""??ˇ?‰??”>52012-04-1023:16:00??”‰?”
好
??改?板：
<…‰′????=""??ˇ?‰??”>
<%=??”???”%><%=…??”%>删除
<%=′??”?%>
实?板的作用''￠用面多了一?删除的连接–?了演示backbone的
DELETE操作。
?板建立￠容￥下面来建立页面端的实体类这?更容￥“篇文章已?分析好了：
??–???=.?′?`?”?…”?.”??”…({
???R???:'''',
…”?????:{
′??”?:'''',
??”???”:'''',
…??”:''''
},
′?”??:?′?‰?(){
??‰?.…”????();
}
});
没有?一篇文章的同可能?怪什urlRoot空这再重￠一下
当model和collection一使用的§者更确的说一?model属于某一?collection
Blog:http://www.the5fire.net共享、交流、提高
§collection的url将取?mode的urlRoot?的urlRootfi须存在。
着思路在来collection实的￠“?这的collection没有太多的?作?
做：
??–???L‰??=.?′?`?”–???”′?‰?.”??”…({
???:''//''′???,
??…”?:–???
});
?ˇ已￥￠。
?同?前?分析的todos一样?来建立一???chat界面的类,?致用''
?仿–使用–发挥：
??–???‰”=.?′?`?”‰”.”??”…({
??ˇ“??”:''''?‰,
?”?????”:_.?”?????”($(''#-''‰?”??”?????”).????()),
””??:{
''#''′?‰′?…”????:''''′?”??
},
‰‰?‰??‰”:?′?‰?(){
_.`‰…??(??‰?,''''?”…”?,''''?”??”);
??‰?.??…”?.`‰…(''''′??ˇ”,??‰?.?”…”?);
??‰?.??…”?.`‰…(''''…”????,??‰?.?”??”);
},
?”…”?:?′?‰?(){
$(??‰?.”?).????(??‰?.?”?????”(??‰?.??…”?.???S“()));
?”?????‰?;
},
′?”??:?′?‰?(){
??‰?.??…”?.′?”??();
Blog:http://www.the5fire.net共享、交流、提高
}
});
?fl￥肖多说。
?应着?有一?整体的?view：
????‰”=.?′?`?”‰”.”??”…({
”?:$(''.''??‰),
””??:{
"#"′?‰′??”…:""??
},
‰‰?‰??‰”:?′?‰?(){
_.`‰…??(??‰?,''''?……”,''''?……??);
??‰?.‰′???”=??‰?.$(''#''‰′???”);
??‰?.?”????”?=??‰?.$("#"′??”?);
.′???L‰??`‰…(''''?……,??‰?.?……”);
.′???L‰??`‰…(''''?”?”?,??‰?.?……??);
.′???L‰??”?′?();
?”??”???(?′?‰?(){
.′???L‰??”?′?({?……:???”});
},5000);
},
?……”:?′?‰?(′???){
//页面所有的数据?来源于?”?”?端如果￥?”?”?端的数据￥应添加页面
‰(!.′???‰?“”()){
??‰”=”–???‰”({??…”?:′???});
??‰?.$("._"′????‰??).???”…(.‰”?”…”?().”?);
$(''#''?′?””).?′???????($("._"′????‰??).?”‰ˇ??()+200);
}
},
?……??:?′?‰?(){
.′???L‰??”?′?(??‰?.?……”);
},
Blog:http://www.the5fire.net共享、交流、提高
??:?′?‰?(””?){
.′???L‰??′?”??”(??‰?.”???‰`??”?());
//了足和FF?及′????”
??‰?.?”????”?.?”??('''');
??‰?.?”????”?.??('''');
??‰?.?”????”?.????('''');
},
”???‰`??”?:?′?‰?(){
??′??”?=??‰?.?”????”?.??();
‰(′??”?==''''){
′??”?=??‰?.?”????”?.?”??();
}
?”???{
′??”?:′??”?,
??”???”:??‰?.‰′???”.??(),
…??”:_ˇ”??‰?”()
};
}
});
中有?地方需?注意：
?1、$(‘#screen’).scrollTop($(“.chat_list”).height()+200);这个了个
聊天的最下方。
?2、
setInterval(function(){
chatList.fetch({add:true});
},5000);
这个的就，5就到到服务器一下，面的add：true?￠，￡
?￥后?在§有上currency1加。
下需?说的''￥用忘了初始化AppView?及在ChatView定义的方实例化
ChatList：
Blog:http://www.the5fire.net共享、交流、提高
??′???L‰??=”–???L‰??;
//–???‰”定义方
?????‰”=”??‰”;
这web端的?fl''建了?面的实可?发web端和server端的交互
通过collection中定义的url:’/chat/’来的。所有的CRUD操作通过
POSTGETPUTDELETE来。
这篇文章''ˇ有?疑a敬留言。下一篇来建服务器端。
15、backbone实战：webchat（''）server端开发
作者：胡阳
本文链接:http://www.the5fire.net/15-backbone-webchat4.html
一篇?web端建了一下这一篇来建服务器端。
关于django开发应用相`?已???了￥??的可?移这：django使用
webchat的整体目录结fi同todos一样有有真相：
Blog:http://www.the5fire.net共享、交流、提高
来配置数据库连接：
fl?SS={
''''…”????:{
''''““:''...3''…ˉ?ˇ?…``?′?”…??—?‰?”,#''_2'','''','''',''3''……????ˇ?”?—???′??ˇ????ˇ?”?—???—??—?‰?”??
''''.???′?”
''''“:''''”`′???…`,#3.???????…???`??”‰?”‰??‰ˇ?—?‰?”
''''?SR:'''',#3.“????”…‰???—?‰?”
''''·SS¨Rfl:'''',#3.“????”…‰???—?‰?”
''''˙S?:'''',#.3.S”???”??????‰ˇ????′??????“????”…‰???—?‰?”
''''·R?:'''',#.3.S”???”??????‰ˇ??…”????“????”…‰???—?‰?”
}
Blog:http://www.the5fire.net共享、交流、提高
}
当?像扩展todos§一样settings.py文件中fi有￠多需?配置的。建议有的
?git的?fl最给链接。
有一点?提醒的“这用了session的操作所?在INSTALL_APP配置如下：
_“S?LLfl··S=(
''..''…ˉ?ˇ?′???‰`?”??‰??,
''.''”`′???′???,
)
?再来配置urls.py这?文件最配置和最配置?可?实?倒?这?urls可?
当作一?详细设计来用定义好每一?需?提供数currency1来实''行。￥过￠多§并￥一
开始''能￠明确所需的功能的''想?做这?webchat一样?前分析并扩展了todos。
来urls.py的配置：
#=-8”′?…‰ˇ??
''''''
:5????????”‰?”
:://.5.`??ˇ??????”‰?””?
:2012-4-6…??”
''''''
???.…ˉ?ˇ?′?.????.…”?????‰?????????”??,‰′??…”,???
???.…ˉ?ˇ?‰”?.ˇ””?‰′.?‰???”‰?????__…‰?”′????”?????”
‰??????”??‰ˇ?
???.”`′???′???‰?????_‰”?′???
???????”??=????”??('''',
(?''^_/(?.)$''?‰?”?”…‰?·,''...''…ˉ?ˇ?‰”?????‰′?”?”,{''_''…?′??”?????:
.?”??‰ˇ?__S??–fl–R?,''_''???‰…”?”?:F???”}),
(?''^/$''′???,_.‰”?′???′???),
(?''^/(\+)$''′???,_.‰”?′???′???fl”?”?”),
(?''^$'',_.‰”?′??????…??ˇ”),
)
)
Blog:http://www.the5fire.net共享、交流、提高
?–?的url：chat?及chat/（\w+）,前者?CR来a的者一?正的url
示chat/[于1位的意符]用来?UDa“这?需?id的。
urls.py''一?实的指导那有了指导来应实吧views_chat.py：
#=-8′?…‰ˇ??
''''''
:5????????”‰?”
:://.5.`??ˇ??????”‰?””?
:2012-4-09…??”
''''''
?????…”??‰?????–???
???.…ˉ?ˇ?????‰?????˙???R”????”
???.…ˉ?ˇ??????′???‰?????__?”…”????”????”
???.…ˉ?ˇ???‰??‰??????‰???”ˉ??
‰??????‰?”
''''''
??`?‰′
@…”?′页面载入者刷新的§重置记录指针0
@?”???
''''''
…”???…??ˇ”(?”—?”??):
.?”—?”???”??‰?[''_''?”′??…??”?]=0
?”???__?”…”????”????”(''/.''′???′???????,{})
''''''
??`?‰′
@…”?′的控制添加和
''''''
…”′???(?”—?”??):
‰.?”—?”???”???…==''''·S?:
Blog:http://www.the5fire.net共享、交流、提高
?”?????(?”—?”??)
”?‰.?”—?”???”???…==''''?:
?”???′?????L?ˇ(?”—?”??
”??”:
?”???˙???R”????”(''''?′′”??…”)
''''''
??`?‰′
@…”?′删除应的记录
''''''
…”′???fl”?”?”(?”—?”??,_…”?”?”‰…):
.–????`ˉ”′??.ˇ”?(‰…=_…”?”?”‰…).…”?”?”()
_?”′??…??”?=.?”—?”???”??‰?.ˇ”?(''_''?”′??…??”?)
.?”—?”???”??‰?[''_''?”′??…??”?]=_-?”′??…??”?1
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
''''''
??`?‰′
@…”?′保存用?的消息数据库中
@?????·S?中的??”???”和′??”?
''''''
…”??(?”—?”??):
?”—=.?‰???”ˉ?????…?(.?”—?”??__??????…???)
??”???”=?”—[''''??”???”]
′??”?=?”—[''''′??”?]
‰??:′??”?
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:F???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
′???=–???()
.′???′??”?=′??”?
.′?????”???”=??”???”
.′?????”()
Blog:http://www.the5fire.net共享、交流、提高
?”???˙???R”????”(.?‰???”ˉ??…????({''''??′′”??:???”}),?‰?”??”=''/''????‰′??‰?ˉ??)
''''''
??`?‰′
@…”?′据?”??‰?中的_?”′??…??”?的数获取?数始的所有记录
@?”???返回应的的形式
''''''
…”′?????L?ˇ(?”—?”??):
‰''_''?”′??…??”?‰.?”—?”???”??‰?:
_?”′??…??”?=.?”—?”???”??‰?.ˇ”?(''_''?”′??…??”?)
”??”:
_?”′??…??”?=0
.?”—?”???”??‰?[''_''?”′??…??”?]=0
′???L‰??=.–????`ˉ”′??.???()[_:?”′??…??”?]
_′????‰??…‰′?=[]
.?”—?”???”??‰?[''_''?”′??…??”?]=?”(′???L‰??)+_?”′??…??”?
??′???‰:′???L‰??
_.′????‰??…‰′????”…({''''‰…:.′???‰…,''''′??”?:.′???′??”?,
''''??”???”:.′?????”???”,
''''…??”:???(.′???…??”).???‰?(''.'')[0]
})
?”???˙???R”????”(.?‰???”ˉ??…????(_′????‰??…‰′?),?‰?”??”=''/''????‰′??‰?ˉ??)
面的?fl确实￥多?有五?数一?loadpage?''￥用说了。那下的四?
chat数作用￠明确''像在urls.py说的一样?负责据POST和GET来执行应操作。
say和chatAllLog''加和的数。另外一?chatDelete￠明显''删除的操作。
在实server端的§实有一?疑a的。''在的§怎返回已有的记录“?有
的一张。
一开始的思web端每隔三''fetch一下?所有的数据?￡过。?这于服务器
和宽来说开销太每?和递所有的数据确实显的太笨了。
那怎才能每?返回最新入数据库中的数据
本来?想?backbone的collection.fetch这?数下的?没?想的那
“差异化“的。所?''想了一?`′笨的方法''使用session来记录每取了多?数据“
数据累加的所??需??应的记录开始取''可?了。
Blog:http://www.the5fire.net共享、交流、提高
所?''面?fl中没有提的session操作。
具体来说有三?操作：
?“一、提一￡，??行?计，?计出一?了fifl到web端。
?“二、￡–一记录，?应的?flsession中的?计。
?“三，￡·页面?要?0开计。
所?这样''了述?fl中关于session的操作分。
好像遗忘了实体类的￥过??这?￥重?“?和web端的一样的。了整
粘o下面：
#=-8′?…‰ˇ??
???.…ˉ?ˇ?…`‰???????…”??
′????–???(.??…”???…”?):
′??”?=.??…”??–???F‰”?…(_????”ˇ??=1024)
??”???”=.??…”??–???F‰”?…(_????”ˇ??=1024)
…??”=.??…”??fl??”?‰?”F‰”?…(__??????……=???”)
ˇ这?webchat已?建了目前这??目来fi￠的如果感
可?进行善。关于backbone的实践ˇ一了。
想?诉的一定??做一??目即着文章做了一遍。在?分析todos
和写webchat§?￥同的感受分析todos§??作者的?fl￠凝练￠优雅?着
能感?能写来?在写webchat的§才发明白、￥一定意`着能写来所
?想?、提高fi?多实践。
?一门技术的过程?：?仿—使用—发挥。
webchat在gihub:https://github.com/the5fire/webchat
16、总结的说
作者：胡阳
本文链接:http://www.the5fire.net/16-backbone-summary.html
目前??人感?已??backbone.js的基本使用说?了如果有哪￥?的
提来一探。
?一开始写这系列文章在已?一?月了一开始接触?这?￠￥错?中文资?太
?了所?''萌了写一系列基的文章?人在这?框架的§多?资?这一系列文
Blog:http://www.the5fire.net共享、交流、提高
章?￥教程?笔记。能给者来???最欣慰的?。
实?研究这?框架花三多的§currency1''·了?一写文章来''??可能的详细怕
误导别人于''战越拉越在才一。
说backbone的?实?依??初者停留在应用阶?一?框架的诞
流行?离￥开框架中所蕴涵的哲者说?髓。??一?框架一定?框架的a使用
实践开始￥过于有a开发?验的人来说?接品读源fl应最好的方式?没有达那
样的水平没有尝试过?猜测。
总结的话''这多了发点?有?一提高backbone的?二分享?
给。
下一篇写一??用的资源之这一系列''了。
17、backbone.js???”
作者：胡阳
本文链接:http://www.the5fire.net/17-backbone-js-resource.html
?先…‰就backbone.js的?：
http://documentcloud.github.com/backbone
?能?认识backbone.js什?及怎用的fi：
http://backbonetutorials.com/
另外fi有几篇中文的¨￥错：
http://weakfi.iteye.com/blog/1391990
http://blog.csdn.net/soasme/article/details/6581029
http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
|
|
