Use backbone. js, zepto. js, and trigger. io to develop the HTML5 App, backbone. jshtml5

Use backbone. js, zepto. js, and trigger. io to develop the HTML5 App, backbone. jshtml5

To ensure fast running and fast response, we recommend using backbone. js and zepto. js. To make this process more interesting, we have developed a small sample project that uses CSS to reset the style, Backbone. js, and several pages with transition effects. Our project will display Trigger Twitter updates and a single twitter message. As usual, we will use the same HTML5 code library to create Android and iOS applications. In this process, we will introduce how to: add your JavaScript file to the application using Backbone. js to display the response UI and use CSS to reset the style, reduce cross-platform inconsistencies and implement sample transfer between views in applications. You can develop your own projects at Will-this is a good foundation for developing new projects! The code is stored on github. For details, see: https://github.com/trigger-corp/Forge-Bootstrap . Added file Backbone. js is responsible for processing historical records, user operations, and setting the HTML5Boilerplate structure for the entire JavaScript box. It aims to reduce the impact of inconsistent rendering default values on different platforms, this Lightweight Framework for mobile devices is an alternative to jQuery and can be used for DOM (Document Object Model) processing. Pipeline, as you do on a normal Website: & lt; link rel = "stylesheet" href = "css/reset.css" & gt; & lt; link rel = "stylesheet" href = "css/demo.css" & gt; & lt; script type = "text/javascript" src = "js/lib/zepto. min. js "& gt; & lt;/script & gt; & lt; script type =" text/javascript "src =" js/lib/underscore-min.js "& gt; & lt; /script & gt; & lt; script type = "text/javascript" src = "js/lib/backbone-min.js" & gt; & lt; /Script & gt; & lt; script type = "text/javascript" src = "js/demo. in js "& gt; & lt;/script & gt;, we only use the html5sample format (reset.css), JavaScript library, and our own two files: demo.css and demo. js. When using Backbone, you should set all aspects required for the normal operation of the application at the entry point, and then start to run the historical system of Backbone. For example, in this project, we use $ (Demo. init), when the application starts, run the following functions only once: // when the application starts, only one init: function () is called () {// get the Trigger Twitter update content forge. request. ajax ({url :" https://twitter.com/statuses/user_timeline/14972793.json ", DataType:" json ", success: showIndex}); // call function showIndex (data) Once Trigger Twitter updates) {// Save the initial data for Demo. items = new Demo. collections. items (data); // create a Backbone Demo. router = new Demo. router (); Backbone. history. start () ;}} here, we use request. ajax function to retrieve our Twitter messages, store the data in a collection, and then start running Backbone. Use Backbone. jsBackbone. history. start () to subscribe to the window. onhashchange event of Backbone. When a part of the URL changes, routes is used. routing defined in js: routes: {":" index ", // entry point: no hash partition or #" item/: item_id ": "item" // # item/id}. The route maps the URL to the function. Here we define two routes: one corresponding to # index () and the other corresponding to # item/[item_id]. The item_id is passed as a parameter to item (). Routing is responsible for arranging URLs for your entire application. Using Backbone to manage the view in the Forge application is a good way: we not only build a URL in the history stack (for example, this means that the "back" button can work as expected on the Android platform), we can also fully control the content displayed in the application, without the need for a slow page loading mechanism. However, especially on mobile platforms, your users expect to switch from a view to the next view with a certain dynamic transition effect. Therefore, you can organize the Backbone view into a page. Page view the code snippet shows how to implement pages in this project. When a page becomes active, it uses the animation transfer effect. You can also see that Zepto is used for DOM processing. Demo. views. page = Backbone. view. extend ({className: "page", initialize: function () {this. render () ;}, show: function () {detail ('.page'detail .css ({"position": "absolute"}); var direction_coefficient = this. options. back? 1:-1; if ($ ('. page '). length) {var $ old = $ ('. page '). not (this. el); // This solution is hard to come by-// The Handler uses .css (property! $ Old. get (0 ). style ["margin-left"] = "" $ old. get (0 ). style ["-webkit-transform"] = "" this. $ el. appendTo ('body '). hide (); this.cancel.show().css ({"margin-left": 320 * direction_coefficient}); this. $ el. anim ({translate3d:-320 * direction_coefficient + 'px, 0.3 '}, 'linear'); $ old. anim ({translate3d:-320 * direction_coefficient + 'px, 0.3 '}, 'linear', function () {$ old. remove (); items ('.page'}.css ({"pos Ition ":" static "});} else {this. $ el. appendTo ('body '). hide (); this. $ el. show ();} window. scrollTo (0, 0) ;}}); if you want to implement this page in your own view, and use the show () method to switch from one page to another. For example, in this project, we create a page for the initial view of all Twitter messages and create a page for each single twitter message. We can see that Forge. request. ajax is used to request remote servers. This project also makes full use of other Forge APIs. In expand_item (), we use forge. tabs. open () to open a new external page tab in a cross-platform manner. Open () is described here. Finally, we use forge in the click_or_tap () function. is so that we can monitor the tap event on the mobile device and click event on other devices ). This document describes the easy-to-detect platform. Click_or_tap: function (obj) {// for object attributes, add "click" for the attribute and use the original value var new_obj ={}; for (var property in obj) {if (obj. hasOwnProperty (property) {if (forge. is. mobile () {new_obj ["tap" + property] = obj [property];} else {new_obj ["click" + property] = obj [property] ;}} return new_obj} is very important because the click event is not as responsive as the mobile device. To build and run applications on your own, please register on our website ( https://trigger.io/ ); If you do not have a Trigger. io Forge framework, install the framework and create a Forge environment (for the operation steps, see http://docs.trigger.io/en/v1.3/forge/index.html ). Create a new directory for your application, run the cd command to enter the directory, Run "forgecreate-n Demo", and create a Demo (Demo) in your account) application. Copy the tutorial code to the src directory to overwrite the template Code created before forge. Run forge build to build each version of the application (this step is slow for the first time-but the subsequent build process is as fast as lightning !) Run forge run android or forge run ios to view the application (you need to install the android or iPhone simulator first-For more information, see our instructions: http://docs.trigger.io/en/v1.3/android/getting-started.html ). If you connect to your android phone, forge run android will deploy the application on your phone for testing (ensure that the USB debugging mode is enabled ). Enjoy it! In this way, you can process the source code at will. We hope everything is clear.