Build a JavaScript-based mobile Web cms--template

In the previous article, "Building a mobile Cms--hello,world based on JavaScript" tells about the approximate composition of the Qi CMS and makes a simple example, Hello,world. This time, we will simply put the CMS into a running server environment, that is to say we need a simple operating environment, in order to do something more interesting-add a template.

Before you start environment-ready UNIX-like systems

Since Python is already installed on the computer, a simple server is used in Python, which can be run for Unix-like systems such as Gnu/linux, Mac OS, and so on:

Python-m Simplehttpserver 8000

Windows

For Windows, if you already have Python, it's natural to run it the way it is. If not, you can try mongoose it and download an installation.

JS Library Preparation

The JS library that needs to be prepared has

1. Backbone
2. Requirejs plug-in Text.js
3. Mustache

Just want this code.

Then that's it.

[Email Protected]:gmszone/moqi.mobi.git

Then switch to the Learing branch

Git checkout Learning

Checkout to this version

git checkout 62fbdaf

Building a mobile web CMS

The list of files is shown below

.| ____app.js|____backbone.js|____homeview.js|____index.html|____jquery.js|____main.js|____mustache.js|____ Require.js|____router.js|____text.js|____underscore.js

There is some confusion here, but in order to reduce the trouble of some of the configuration, this is the first to tell.

Add route

One of the purposes of backbone is its routing function, then add such a Js--router.js , the contents are as follows:

define ([    ' jquery ',    ' underscore ',    ' backbone ',    ' homeview.js '], function ($, _, backbone, Homeview) {    var approuter = Backbone.Router.extend ({        routes: {            ' index ': ' homepage ',            ' *actions ': ' homepage '        ) }    });    var initialize = function () {        var app_router = new Approuter;        App_router.on (' Route:homepage ', function () {            var homeview = new Homeview ();            Homeview.render ();        });        Backbone.history.start ();    };    return {        initialize:initialize    };});

Here we first ignore the homeview.js, because this is to say, in router.js, we define a approuter,

2. index points to the homepage defined at initialization time, so you can turn the home page to Homeview.js.
4. *actions is to turn all other mismatches to homepage.

and then we need to revise app.js , so that he can go to the routing option as soon as it runs

define ([' jquery ', ' underscore ', ' router '), function ($, _, router) {    var initialize = function () {        Router.initialize ();    };    return {        initialize:initialize    };});

That is, initialize the route.

Create a Home view

The advantage of using mustache is that the backend only needs to provide the data and provide a location in the foreground. So we've modified the next HTML

<! DOCTYPE html>


Create an ID like Aboutarea, so we can happily add project data to Homeview.js.
define ([    ' jquery ',    ' underscore ',    ' mustache ',    ' text!/index.html '], function ($, _, mustache, indextemplate) {    var Homeview = Backbone.View.extend ({        el: $ (' #aboutArea '),        render:function () {            var data = {                project: "My Sample project"            };            this. $el. HTML (mustache.to_html (indextemplate, data));        }    );    return homeview;});


In Homeview.js, where data is defined as an object, the final effect of the code is to replace "My Sample project" with the {{Project}} in HTML.
So we completed a real mobile Web CMS platform Hello,world, the rest is to add one after another scaffolding.
The final effect of CMS
cms:http://cms.moqi.mobi/
SOURCE Github:https://github.com/gmszone/moqi.mobi
QQ Discussion Group: 344271543
Release version download 0.2.tar.gz
Build a JavaScript-based mobile Web cms--template