构建基于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库有

BackboneRequireJs的插件text.jsMustache

只想要这次的代码

那么就这样子吧

 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

*actions

接着我们需要修改一下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

旅游，放松心情，用眼睛享受风景。

相关文章：

你感兴趣的文章：

标签云：