标签：移动 web cms backbone.js 源码
在上一篇《构建基于Javascript的移动CMS——Hello,World》讲述了墨颀 CMS的大概组成，并进行了一个简单的示例，即Hello,World。这一次，我们将把CMS简单的放到一个可以运行的服务器环境中，也就是说我们需要一个简单的运行环境，以便于进行更有意思的东西——添加模板。
因为电脑上已经装有python了，这里便用python起一个简单的server，对于GNU/Linux、Mac OS等类unix系统来说，都可以这样运行:
python -m SimpleHTTPServer 8000
Windows
对于Windows来说，如果你已经装有python的话，那自然是可以用上面的方式运行。如果没有的话，可以试一下mongoose，下载一个安装之。
需要准备的JS库有
那么就这样子吧
git@github.com:gmszone/moqi.mobi.git
接着切换到learing分支
git checkout learning
checkout到这个版本
git checkout 62fbdaf
文件列表如下所示
. |____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
};
});也就是初始化一下路由。
使用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，剩下的便是添加一个又一个的脚手架。
源码 Github: https://github.com/gmszone/moqi.mobi
QQ讨论群: 344271543
Release版下载0.2.tar.gz
标签：移动 web cms backbone.js 源码
原文地址：http://blog.csdn.net/phodal/article/details/38056955
