构建基于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最后的效果
源代码 Github: https://github.com/gmszone/moqi.mobi
QQ讨论群: 344271543
Release版下载0.2.tar.gz