构建基于Javascript的移动web CMS——模板

在上一篇《构建基于Javascript的移动CMS——Hello,World》讲述了墨颀 CMS的大概组成，并进行了一个简单的演示样例，即Hello,World。这一次，我们将把CMS简单的放到一个能够执行的服务器环境中，也就是说我们须要一个简单的执行环境，以便于进行更有意思的东西——加入�模板。

開始之前

环境准备

类Unix系统

由于电脑上已经装有python了，这里便用python起一个简单的server，对于GNU/Linux、Mac OS等类unix系统来说，都能够这样执行:

python -m SimpleHTTPServer 8000

Windows

对于Windows来说，假设你已经装有python的话，那自然是能够用上面的方式执行。假设没有的话，能够试一下mongoose，下载一个安装之。

JS库准备

须要准备的JS库有

Backbone
RequireJs的插件text.js
Mustache

仅仅想要这次的代码

那么就这样子吧

 git@github.com:gmszone/moqi.mobi.git

接着切换到learing分支

git checkout learning

checkout到这个版本号

git checkout 62fbdaf

构建移动web CMS

文件列表例如以下所看到的

.

|____app.js

|____backbone.js

|____HomeView.js

|____index.html

|____jquery.js

|____main.js

|____mustache.js

|____require.js

|____router.js

|____text.js

|____underscore.js

在这里有些混乱，可是为了少去当中的一些配置的麻烦，就先这样讲述。

加入�路由

用Backbone的一个目的就在于其的路由功能，于是便加入�这样一个js——router.js,内容例如以下所看到的:

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

    };

});

在这里我们先忽略掉HomeView.js，由于这是以下要讲的，在router.js中，我们定义了一个AppRouter，

index指向的是在初始化时候定义的homePage，这样就能够将主页转向HomeView.js。
*actions便是将其它未匹配的都转向homePage。

接着我们须要改动一下app.js，让他一执行地时候便能够进入路由选择

define(['jquery', 'underscore', 'router'], function($, _, Router) {

    var initialize = function() {

        Router.initialize();

    };

    return {

        initialize: initialize

    };

});

也就是初始化一下路由。

创建主页View

使用Mustache的长处在于，后台仅仅仅仅须要提供数据，并在前台提供一个位置。因此我们改动了下HTML

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <script data-main="main" src="require.js"></script>

    </head>

    <body>

        <div id="aboutArea">{{project}}</div>

    </body>

</html

创建了aboutArea这样一个ID，于是我们便能够非常愉快地在HomeView.js中加入�project的数据。

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;

});

在HomeView.js中，定义了data这样一个object，代码终于的效果便是用"My Sample Project"替换到HTML中的{{project}}。

这样我们便完毕了一个真正意义上的移动web CMS平台的Hello,World，剩下的便是加入�一个又一个的脚手架。

CMS最后的效果

CMS: http://cms.moqi.mobi/

源代码 Github: https://github.com/gmszone/moqi.mobi

QQ讨论群: 344271543

Release版下载0.2.tar.gz

秒客网