標籤：移動 web cms backbone.js 源碼
在上一篇《構建基於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庫有
那麼就這樣子吧
[email protected]: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 };});
也就是初始化一下路由。
建立首頁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
構建基於Javascript的移動web CMS——模板
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
