構建基於Javascript的移動web CMS——載入JSON檔案

標籤：開源項目   移動   web   外掛程式   extension   

在上一篇中說到了如何建立一個Django Tastypie API給移動CMS用，接著我們似乎也應該有一個本地的設定檔用於一些簡單的配置，如"擷取API的URL"、"產品列表"、"SEO"(在一開始的時候發現這是不好的，後面又發現Google的爬蟲可以運行Javascript，不過也是不推薦的。)這些東西是不太需要修改的，直接寫在代碼中似乎又不好，於是放到了一個叫作configure.json的檔案裡。

RequireJS Plugins

網上搜尋到一個叫RequireJS Plugins的repo。

裡面有這樣的幾個外掛程式:

1. async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).
2. font : Load web fonts using the WebFont Loader API (requirespropertyParser)
3. goog : Load Google APIs asynchronously (requires async!plugin and propertyParser).
4. image : Load image files as dependencies. Option to "cache bust".
5. json : Load JSON files and parses the result. (Requires text!plugin).
6. mdown : Load Markdown files and parses into HTML. (Requirestext! plugin and a markdown converter).
7. noext : Load scripts without appending ".js" extension, useful for dynamic scripts.

於是，我們可以用到這裡的json用來載入JSON檔案，雖然也可以用Requirejs的text外掛程式，但是這裡的json有對此稍稍的最佳化。

在後面的部分中我們也用到了mdown，用於顯示一個md檔案，用法上大致是一樣的。

RequireJS JSON檔案載入

將json.js外掛程式放到目錄裡，再配置好main.js。

require.config({    paths: {        ‘text‘: ‘text‘,        jquery: ‘jquery‘,        json: ‘require/json‘    },    shim: {        underscore: {            exports: ‘_‘        }    }});require([‘app‘], function(App) {    App.initialize();});

於是我們將HomeView.js中的data變為configure的資料，這樣便可以直接使用這個json檔案。

define([    ‘jquery‘,    ‘underscore‘,    ‘mustache‘,    ‘text!/index.html‘,    ‘json!/configure.json‘], function($, _, Mustache, indexTemplate, configure) {    var HomeView = Backbone.View.extend({        el: $(‘#aboutArea‘),        render: function() {            this.$el.html(Mustache.to_html(indexTemplate, configure));        }    });    return HomeView;});

configure.json的代碼如下所示:

{    "project": "My Sample Project"}

最後實現的效果和模板結束是一樣的，只會在頁面上顯示

My Sample Project

結束擷取代碼

一、使用git

git clone https://github.com/gmszone/moqi.mobigit checkout b03f54c

二、直接下載

其它

CMS效果: 墨頎 CMS

QQ討論群: 344271543

項目: https://github.com/gmszone/moqi.mobi