This article is a part of the previous supplement, but also a recent study of require, backbone practice of an instantiation, I hope to be learning to understand the students are helpful
Please go to: Make a Web page picture Viewer for mobile phone use
New mobile phone picture viewer
Web Part
Require introduction is the focus, indicating the file path where the main function resides
<!doctype html>
Load the main.js after the require.js load is complete; the style part is not occupied, then look at the full page
Stencil engine part
The first is the dialog box, the second is the current position, the third is the current display picture
<script id= "Dialog_tmpl" type= "text/template" > <section></section> <figure id= "swipe" "><ul></ul></figure> <footer> <span id=" L "> L </span> < Span id= "R" > right </span> <span id= "pos" index= "<%=index%>" length= "<%=length%>" ><%= Index%>/<%=length%></span> </footer> </script> <script id= "Pos_tmpl "Type=" Text/template > <span id= "pos" index= "<%=index%>" length= "<%=length%>" ><%= Index%>/<%=length%></span> </script> <script id= "Item_tmpl" type= "text/" Template "> "width=" <%=width%> "height=" <%=height%> "url=" <%=url %> "/> </script>
3 templates need to be written in HTML files
Program Development Section
Main function Main.js
Require.config ({
paths: {
jquery : ' Http://cdn.file1.goodid.com/static/js/zepto.min ',
Fastclick: ' Http://cdn.file1.goodid.com/static/js/fastclick.min ',
underscore: ' http://cdn.file1.goodid.com/static/js/ Underscore.min ',
backbone: ' Http://cdn.file1.goodid.com/static/js/backbone.min ',
swipe : ' http:// Cdn.file1.goodid.com/static/js/swipe.min '
},
shim: {
jquery: {
exports: ' $ '
},
Fastclick: {
deps: [' jquery ']
}}}
;
require ([' underscore ', ' backbone ', ' fastclick '], function () {
Fastclick.attach (document.body);
Require (['./view/global '], function (global) {
var global = new global;
});
Paths defines each module path; shim The jquery module, Fastclick (a micro-plug-in that helps improve the touch experience) indicates a dependency module jquery
Require first loads the underscore, backbone, jquery, fastclick modules, then loads the global control view and instantiates
Global control view Global.js
define ([' Model/pic ', ' collection/set ', ' view/imager '], function (pic, set, imager) {var set = new set; Global control view var global = Backbone.View.extend ({el: ' Body ', Data: $ ('. download [url] '), events: {' click. downl
oad [url] ': ' Open '}, Open:function (model) {var URL = $ (model.target). attr (' url ');
var index = This.data.index ($ (model.target));
var length = This.data.length;
var total = new Pic.total ({index:index + 1, length:length});
var dialog = new Imager.dialog ({model:total}); $ (This.el). Prepend (Dialog.render (). EL);
Draw Picture Viewer this.collect ();
This.list ();
This.swipe (index);
This.loading (URL, index);
}, Collect:function () {if (Set.length > 0) return false;
This.data.each (function () {var name = $ (this). text ();
var url = $ (this). attr (' url ');
var item = new Pic.item ({name:name, url:url}); Set.add (item);
Add model}); }, List:function () {var obj =$ (' #swipe ul ');
Set.each (function (model) {var list = new Imager.list ({Model:model}); Obj.append (List.render (). EL);
Draw a picture list});
}, Swipe:function (index) {require ([' swipe '], function () {var swipe = new Imager.swipe; Swipe.render (index). El;
Draw picture Slide effects});
}, Loading:function (URL, index) {var item = new Pic.item ({url:url});
var loading = new Imager.loading ({Model:item, El: $ (' #swipe li '). EQ (index). FIND (' img ')}); Loading.render ();
Draw picture Load}});
return global;
});
The data model PIC module, data set set module, Rendering View Imager module is loaded, and a collection module is instantiated.
In the global control view we have defined: The open method of drawing the picture Viewer, the Collect method of adding the model, the list method of drawing the picture lists, the swipe method of drawing the picture slide effect, the loading method of drawing the picture loading
Render View Imager.js
define ([' model/pic '], function (pic) {var imager = Object;
Picture Viewer View Imager.dialog = Backbone.View.extend ({initialize:function () {_.bindall (this, ' render '); TagName: ' section ', ClassName: ' Dialog ', Template: _.template ($ (' #dialog_tmpl '). html ()), events: {' clic
K #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 ':d eg});
}
}); Picture List View 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 ();
}
});
Picture slide position View Imager.fix = Backbone.View.extend ({initialize:function () {_.bindall (this, ' render '); El: ' #pos ', Template: _.template ($ (' #pos_tmpl '). html ()), Render:function () {$ (This.el). ReplaceWith (THIS.T
Emplate (This.model.toJSON ()));
$ (' #swipe [deg] '). Removeattr (' deg '). Removeattr (' style ');
return this;
}
});
Picture load View imager.loading = Backbone.View.extend ({initialize:function () {_.bindall (this, ' render ');
Template: _.template (' '/> '), 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;
}
});
Picture sliding effects View 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:fu
Nction (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 ();
Draw a picture slide position the 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 ();
Draw picture Load}});
return this;
}
});
Return imager;
});
Data Model Pic.js
Define (function () {
var pic = Object;
Picture data statistic model
Pic.total = Backbone.Model.extend ({
defaults: {
index:1,
length:1
}
});
Picture data Model
Pic.item = Backbone.Model.extend ({
defaults: {
name: ' Picture loading ... ',
src: ' yun_qi_img/ Loading.gif ',
url: ',
width:40,
height:40
}
};
return pic;
});
Data collection Set.js
define ([' model/pic '], function (pic) {
//Picture data set
var set = Backbone.Collection.extend ({
Model:Pic.item
});
return set;
});
The module definition makes the program clearer, and the module load lets the file load execute in our control; the MVC pattern (c is useless) makes separation of the data logic layer easier and reduces code clutter.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
