Construct a Javascript-based mobile web CMS-load JSON files

Construct a Javascript-based mobile web CMS-load JSON files

In the previous article, we talked about how to create a Django Tastypie API for mobile CMS. Then we should also have a local configuration file for some simple configurations, for example, "Get api url", "product list", and "SEO" (it was found at the beginning that this was not good, and later that Google crawlers can run Javascript, but it is not recommended .) These things do not need to be modified. It seems that it is not good to write them directly in the code.configure.json.

RequireJS Plugins

Search for a repo called RequireJS Plugins on the Internet.

There are several plug-ins:

Async: Useful for JSONP and asynchronous dependencies (e.g. Google Maps ).

Font: Load web fonts using the WebFont Loader API (requirespropertyParser)

Goog: Load Google APIs asynchronously (requiresasync!Plugin andpropertyParser).

Image: Load image files as dependencies. Option to "cache bust ".

Json: Load JSON files and parses the result. (Requirestext!Plugin ).

Mdown: Load Markdown files and parses into HTML. (Requirestext!Plugin and a markdown converter ).

Noext: Load scripts without appending ". js" extension, useful for dynamic scripts.

Therefore, we can use the json here to load the JSON file. Although we can also use the text plug-in of Requirejs, The json here is slightly optimized for this.

In the subsequent sections, we also used mdown to display an md file. The usage is roughly the same.

Loading RequireJS JSON files

Put the json. js plug-in the directory and configure main. js.

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

So we changed the data in HomeView. js to configure data, so that we can directly use this json file.

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;});

The configure. json code is as follows:

{    "project": "My Sample Project"}

The final effect is the same as that of the template. It will only be displayed on the page.

My Sample Project

End obtaining code

1. Use git

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

2. Direct download

Others

CMS effect: moji CMS

QQ group: 344271543

Project: https://github.com/gmszone/moqi.mobi