通过模板解析,我们不需要在动态生成HTML结构时拼接字符串,更重要的是,我们可以将视图中的HTML结构独立管理(例如:不同的状态可能会显示不同的HTML结构,我们可以定义多个单独的模板文件,按需加载和渲染即可)。
2.7 自定义事件管理
在Backbone中,你可以使用on或off方法绑定和移除自定义事件。在任何地方,你都可以使用trigger方法触发这些绑定的事件,所有绑定过该事件的方法都会被执行,如:
var model = new Backbone.Model(); // 在model对象中向自定义事件custom绑定两个函数 model.on('custom', function(p1, p2) { // todo }); model.on('custom', function(p1, p2) { // todo }); // 触发custom事件,将调用上面绑定的两个函数 model.trigger('custom', 'value1', 'value2'); // 移除custom事件中绑定的所有方法 model.off('custom'); // 触发custom事件,但不会执行任何函数,已经事件中的函数已经在上一步被移除 model.trigger('custom');
如果你熟悉jQuery,你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。
另外,Backbone支持一个特殊事件”all”,当在一个对象中绑定了名为”all”的事件后,该对象在触发任何事件时,都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用,例如我们可以通过”all”事件监听对象状态的变化。
3.路由器
在单页应用中,我们通过JavaScript来控制界面的切换和展现,并通过AJAX从服务器获取数据。
可能产生的问题是,当用户希望返回到上一步操作时,他可能会习惯性地使用浏览器“返回”和“前进”按钮,而结果却是整个页面都被切换了,因为用户并不知道他正处于同一个页面中。
对于这个问题,我们常常通过Hash(锚点)的方式来记录用户的当前位置,并通过onhashchange事件来监听用户的“前进”和“返回”动作,但我们发现一些低版本的浏览器(例如IE6)并不支持onhashchange事件。
Backbone提供了路由控制功能,通过Backbone提供的路由器,我们能通过一个简单的表达式将路由地址和事件函数绑定在一起,例如:
var CustomRouter = Backbone.Router.extend({ routes : { '' : 'index', // 当URL Hash在根目录时执行index方法:url# 'list' : 'getList', // 当URL Hash在list节点时执行getList方法:url#list 'detail/:id' : 'query', // 当URL Hash在detail节点时执行query方法,并将detail后的数据作为参数传递给query方法:url#list/1001 '*error' : 'showError' // 当URL Hash不匹配以上规则时, 执行error方法 }, index : function() { alert('index'); }, getList : function() { alert('getList'); }, query : function(id) { alert('query id: ' + id); }, showError : function(error) { alert('error hash: ' + error); }, }); var custom = new CustomRouter(); Backbone.history.start();
请尝试将这段代码复制到你的页面中,并依次访问以下地址(其中URL表示你的页面地址):
URL URL#list URL#detail/1001 URL#hash1 URL#hash2
请再试着使用浏览器的“返回”和“前进”按钮来回切换刚刚输入的地址。
你可以看到,当URL Hash发生变化时,会执行所绑定的方法,当遇到没有定义的Hash时,都会执行showError方法,并将未定义的Hash传递给该方法。
Backbone默认会通过Hash的方式来记录地址的变化,对于不支持onhashchange的低版本浏览器,会通过setInterval心跳监听Hash的变化,因此你不必担心浏览器的兼容性问题。
对于支持HTML5 pushState特性的浏览器,Backbone还允许你通过pushState来创建个性化的URL,但是这需要你的Web服务器做一些适配。
3. Backbone的适用性
Backbone并不像jQuery那样具有非常强的适用性,如果你正准备构建一个大型或复杂的单页Web应用,那么Backbone再适合不过。
如果想将Backbone应用到你的网站页面中,且页面中并没有复杂的逻辑和结构,那么这只会让你的页面更加繁琐和难以维护。
如果你的项目并不复杂,但你却深深喜欢它的某个特性(可能是数据模型、视图管理或路由器),那么你可以将这部分源码从Backbone中抽取出来,因为在Backbone中,各模块间的依赖并不是很强,你能轻易的获取并使用其中的某一个模块。
4. 依赖库
你不能独立使用Backbone,因为它的基础函数、DOM操作、AJAX都依赖于第三方库。