全局控制视图中我们定义了：绘制图片查看器的open方法、添加模型的collect方法、绘制图片列表的list方法、绘制图片滑动特效的swipe方法、绘制图片加载的loading方法
渲染视图imager.js
define(['model/pic'], function (Pic){ var imager = Object; // 图片查看器视图 imager.dialog = Backbone.View.extend({ initialize : function (){ _.bindAll(this, 'render'); }, tagName : 'section', className : 'dialog', template : _.template($('#dialog_tmpl').html()), events : { 'click #l, #r' : 'turn' }, render : function (){ $(this.el).html(this.template(this.model.toJSON())); return this; }, turn : function(model){ var index = parseInt($('#pos').attr('index')) - 1; var obj = $('#swipe li').eq(index).find('img'); var deg = parseInt(obj.attr('deg') ? obj.attr('deg') : 0); var type = model.target.id; if(type && type == 'l') deg -= 90; else if(type && type == 'r') deg += 90; if(deg > 360) deg -= 360; else if(deg < -360) deg += 360; obj.css({'-webkit-transform':'rotate(' + deg + 'deg)'}).attr({'deg':deg}); } }); // 图片列表视图 imager.list = Backbone.View.extend({ initialize : function (){ _.bindAll(this, 'render'); }, tagName : 'li', template : _.template($('#item_tmpl').html()), events : { 'click img' : 'close' }, render : function (){ $(this.el).html(this.template(this.model.toJSON())); return this; }, close : function (){ $('.dialog').remove(); } }); // 图片滑动定位视图 imager.fix = Backbone.View.extend({ initialize : function (){ _.bindAll(this, 'render'); }, el : '#pos', template : _.template($('#pos_tmpl').html()), render : function (){ $(this.el).replaceWith(this.template(this.model.toJSON())); $('#swipe [deg]').removeAttr('deg').removeAttr('style'); return this; } }); // 图片加载视图 imager.loading = Backbone.View.extend({ initialize : function (){ _.bindAll(this, 'render'); }, template : _.template('<img src="<%=url %>" />'), render : function (){ var obj = $(this.el); var html = this.template(this.model.toJSON()); var img = new Image(); img.src = this.model.attributes.url; img.onload = function(){ obj.replaceWith(html); }; return this; } }); // 图片滑动特效视图 imager.swipe = Backbone.View.extend({ initialize : function (){ _.bindAll(this, 'render'); }, render : function (index){ var obj = document.getElementById('swipe'); window.mySwipe = Swipe(obj, { startSlide : index, continuous : false, disableScroll : true, callback : function(index, element){ var length = $('#pos').attr('length'); var total = new Pic.total({ index : index + 1, length : length }); var fix = new imager.fix({ model : total }); fix.render(); // 绘制图片滑动定位 var url = $(element).find('img').attr('url'); if(!url || url.length == 0) return false; var item = new Pic.item({ url : url }); var loading = new imager.loading({ model : item, el : $(element).find('img') }); loading.render(); // 绘制图片加载 } }); return this; } }); return imager; });
数据模型pic.js
define(function (){ var pic = Object; // 图片数据统计模型 pic.total = Backbone.Model.extend({ defaults : { index : 1, length : 1 } }); // 图片数据模型 pic.item = Backbone.Model.extend({ defaults : { name : '图片加载中...', src : 'http://cdn.file1.goodid.com/static/images/loading.gif', url : '', width : 40, height : 40 } }); return pic; });
数据集合set.js
define(['model/pic'], function (Pic){ // 图片数据集合 var set = Backbone.Collection.extend({ model : Pic.item }); return set; });
模块定义让程序更加清晰了，模块加载让文件加载执行在我们的掌控之中；MVC模式（C还没用上）让数据逻辑层等分离更加顺手减少了代码混乱。