Require, backbone, and so on,

Require, backbone, and so on,

This article is a supplement to the previous sections. It is also a practice of instantiating require and backbone recently learned. I hope to help students who are learning and understanding it.

Go to: create a webpage Image Viewer for your mobile phone

New Mobile Image Viewer

Webpage Section

The introduction of require indicates the file path of the main function.

<! Doctype html> 
After loading require. js, the main. js is loaded. The style part does not take up space, and you will see the complete webpage later.
Template engine
The first is the dialog box, the second is the current position, and the third is the current display image.
<Script id = "dialog_tmpl" type = "text/template"> <section> </section> <figure id = "swipe"> <ul> </figure> <footer> <span id = "l"> left-handed </span> <span id = "r"> right-handed </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>
Three templates need to be written into HTML files
Program Development
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 the path of each module; shim re-parses the jquery module, fastclick (a micro plug-in that helps improve the Touch Experience) specifies the dependent module jquery
Require first loads the underscore, backbone, jquery, and fastclick modules in sequence, then loads and instantiates the global module of the 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. download [url] ': 'Open'}, open: function (model) {var url = parameters (model.tar get ). attr ('url'); var index = this.data.index(((model.tar get); 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 the Image 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 image list});}, swipe: function (index) {require (['swip'], function () {var swipe = new Imager. swipe; swipe. render (index ). el; // draw image sliding effect}) ;}, 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 image loading}); return global ;});
Load the dependent data model pic module, Data set module, rendering view imager module, and instantiate a set module.
In the global control view, we define: open Method for Drawing Image Viewer, collect Method for adding model, list method for drawing image list, swipe Method for Drawing Image sliding effect, loading Method for drawing image loading
Rendering view imager. js

Define (['model/pic '], function (Pic) {var imager = Object; // image viewer view imager. dialog = Backbone. view. extend ({initialize: function (){_. bindAll (this, 'render');}, tagName: 'core', className: 'Dialog ', template: _.template(('your dialog_tmpl'{.html (), events: {'click # l, # R': 'call'}, render: function () {response (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.tar get. 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}) ;}}); // image list view imager. list = Backbone. view. extend ({initialize: function (){_. bindAll (this, 'render');}, tagName: 'lil', template :_. temp Late((items ('item_tmpl'0000.html (), events: {'click img ': 'close'}, render: function () {parameters (this.el0000.html (this. template (this. model. toJSON (); return this;}, close: function () {$ ('. dialog '). remove () ;}}); // image slide positioning view imager. fix = Backbone. view. extend ({initialize: function (){_. bindAll (this, 'render');}, el: '# pos', template: _.template('{pos_tmpl'{.html (), render: function () {$ (this. e L ). replaceWith (this. template (this. model. toJSON (); $ ('# swipe [deg]'). removeAttr ('deg '). removeAttr ('style'); return this ;}}); // image loading 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 (); im G. src = this. model. attributes. url; img. onload = function () {obj. replaceWith (html) ;}; return this ;}}); // image slide effect view imager. swipe = Backbone. view. extend ({initialize: function (){_. bindAll (this, 'render');}, render: function (index) {var obj = document. getElementById ('swip'); 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 (); // draw the image sliding position 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 image loading}); return this ;}}); return imager ;});
Data Model pic. js
Define (function () {var pic = Object; // picture data statistics model pic. total = Backbone. model. extend ({defaults: {index: 1, length: 1}); // Image Data Model pic. item = Backbone. model. extend ({defaults: {name: 'image loading... ', src: 'http: // cdn.file1.goodid.com/static/images/loading.gif', url: '', width: 40, height: 40}); return pic ;});
Data set. js
Define (['model/pic '], function (Pic) {// var set = Backbone in the image data set. collection. extend ({model: Pic. item}); return set ;});
Module definition makes the program clearer. Module loading puts file loading under our control. MVC mode (C is useless) the separation of the Data logic layer is more convenient to reduce code confusion.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.