Build a JavaScript-based mobile Web cms--template

In the previous article, "Building a mobile Cms--hello,world based on JavaScript" describes the approximate composition of the Ink Qi CMS, and a simple demo example, Hello,world. This time, we will simply put the CMS into a server environment that can execute, that is, we need a simple execution environment, in order to do something more interesting-to join the template.

Pre-start Environment-ready UNIX-like system

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

Python-m Simplehttpserver 8000

windows

For Windows, assuming you already have Python, it's natural to be able to do it the way it is. If not, be able to try mongoose and download an installation.

JS Library Preparation

Need to prepare JS Library has

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

Just want the code this time

Then that's it.

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

Then switch to the Learing branch

Git checkout Learning

Checkout to this version number

git checkout 62fbdaf

Building a mobile web CMS

A list of files such as the one seen 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.

Join? routing

One of the purposes of backbone is its routing function, so it joins in such a Js--router.js , content such as the following see:

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 the following, in Router.js, we define a approuter,

2. index points to the homepage defined at initialization time so that the home page can be turned to homeview.js.
4. *actions is to turn all other mismatches to homepage.

and then we need to change app.js , allowing him to go to the routing option as soon as it executes

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 simply needs to provide the data and provide a location at the front desk. So we changed the next HTML.

<! DOCTYPE html>


Create an ID like Aboutarea so that we can happily add data to the project in 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 code is finally replaced with "My Sample project" in the HTML {{Project}}.
So we're finished. A real mobile web CMS platform Hello,world, the rest is to join? One after another scaffolding.
The final effect of CMS
cms:http://cms.moqi.mobi/
Source Code 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