Implement simple single-page application practices with Require.js and backbone

Objective

The most recent task is to redo the company's touchscreen version, so the garden in a variety of shopping, want to find a suitable framework for the web App. See arrowroot (http://www.cnblogs.com/yexiaochai/) Description of backbone and a simple framework he made demo ( http://www.cnblogs.com/yexiaochai/p/3837713.html), so take doctrine, the source of the download.

Project Framework

Project using VS2012+MYSQL development, MVC architecture, no leaf big so powerful, can only do simple application, the following do a list and detailed page JS code block.

Main JS code block:

<script type="Text/javascript">varIndexmodel =Backbone.Model.extend ({}); varIndexlist =Backbone.Collection.extend ({model:indexmodel, parse:function (data) {return(Data && data.data) | |{}}, Setcomparator:function (type) { This. Comparator =function (item) {returnMath.max (Item.attributes[type]);    }        }    }); varDetail =Backbone.View.extend ({el: $ ("#contents"), Template: _.template ($ ('#detail-template'). HTML ()), events: {'Click #js-return': Function () { This. App.forward ('Index'); }}, Initialize:function (APP) { This. App =app;  This. render (); }, Render:function () {varScope = This; varID = This. app.id; varModel = This. App.model; $.ajax ({URL:'@Url. Action ("Getcontentbyid", "Home")', type:'Get', data: {Id:id}, DataType:'JSON', timeout: +, Error:function () {location.href='/';}, Success:function (data) {if(Data &&data.data) {model.Set('value', Data.data); $(". Viewport"). Hide (); $('#viewport_detail'). Show (); $('#id_viewport_detail'). HTML (Scope.template (Model.tojson ()));        }                }            });    }    }); varIndex =Backbone.View.extend ({el: $ ('#indexlist'), Template: _.template ($ ('#indexlist-template'). HTML ()), events: {'Click. js_largeimg': Function (e) {varEl =$ (e.currenttarget); varindex = el.attr ('Data-index'); varid = el.attr ('Data-id'); varModel = This. List.models[index];  This. App.model =model;  This. app.id =ID;  This. App.forward ('detail/'+ID); }}, Initialize:function (APP) { This. App =app; varScope = This; varCurpage =1; varPageSize =Ten;  This. List =Newindexlist ();  This. List.url ='@Url. Action ("Getindexlist", "Home")';  This. List.fetch ({success:function () {scope.render ();                }                });  This. Listento ( This. List,' All', This. Render); }, Render:function () {varModels = This. List.models; varHTML ="';  for(vari =0, Len = models.length; i < Len; i++) {Models[i].index=i; HTML+= This. Template (_.extend (Models[i].tojson (), {index:i})); }                $(". Viewport"). Hide (); $("#viewport_index"). Show (); $("#indexlist"). HTML (HTML); vars ="';        }        }); varAPP =Backbone.Router.extend ({routes: {"":"Index",//#index                "Index":"Index",//#index                "Detail/:id":"Detail"   //#detail}, Index:function () {varindex =NewIndex ( This.Interface); }, Detail:function (ID) {varDetail =NewDetail ( This.Interface); Detail.app.id=ID; }, Initialize:function () {},Interface: {forward:function (URL) {window.location.href= ('#'+ URL). replace (/^#+/,'#');        }            }        }); varApp =NewApp ();        Backbone.history.start (); vars ="';</script>

Achieve good results, continue to strive to continuously optimize ing .....

Implement simple single-page application practices with Require.js and backbone