A light weight and easy to use Single Page Application (SPA) framework based on views in Mustache format
moostaka depends on jQuery and Moustache. They need to be added to your <head> tag above moostaka.js
A demo and examples can be found: http://moostaka.markmoffat.com.
Check out the example app in the /example folder.
Example:
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='dist/moostaka.js'></script>
npm install moostaka
Download the moostaka library from here.
Your app will use a main HTML file - eg: index.html. This will contain all Javascript, CSS and possibly some general layout elements (menus, sidebar, footer etc). An example layout to get started:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>moostaka template</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='dist/moostaka.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<div id='main-body'></div>
</body>
</html>
Create a new instance of moostaka:
var moostaka = new Moostaka();
moostaka allows a few options:
defaultRoute = The route which the browser will be redirected too should no route be matched
viewLocation = The path to the folder which will contain the view (.mst) files
var moostaka = new Moostaka({
defaultRoute: '/contact',
viewLocation: '/my_view_folder'
});
Default options
defaultRoute: '/'
viewLocation: '/views''
Setting up a home route is as simple as:
moostaka.route('/', function(params){
// do stuff
});
And a contact route like so:
moostaka.route('/contact', function(params){
// do stuff
});
Views are Mustache template files which are loaded by routes. Each view must have the .mst file extension.
An example static home.mst view:
<script id='template' type='text/template'>
<h1>This is a view</h1>
</script>
Views can also render data (see 'Rendering a view') by using the double Mustache brackets {{variable}}:
<script id='template' type='text/template'>
<h1>This is a view</h1>
<h1>My name is {{name}}</h1>
</script>
Views are rendered by calling the render() function. This can be done with or without a callback.
The function takes the following parameters:
index.html which the view HTML will be appended to using jQuery selectorsWithout a callback:
moostaka.render('#main-body', 'home', params);
With a callback:
moostaka.render('#main-body', 'home', params, function(){
// The rendering is complete and HTML within '#main-body' can be accessed
});
With options:
moostaka.render('#main-body', 'home', params, {append: true, tags: [ '<%', '%>' ]}, function(){
// The rendering is complete and HTML within '#main-body' can be accessed
});
Options
append : Whether to replace or append to the element. Defaults to false
tags : If you are wanting to change the Mustache tags for rendering. Defaults to {{}}. See here.
In the instance you simply want the HTML and not wanting to automatically render that to a DIV you can use the getHtml() funtion.
This function must have a callback in order to return the HTML data.
The function takes the following parameters:
moostaka.getHtml('html', params, function(html){
// Do things with the returned html
});
With options:
moostaka.getHtml('markdown', params, {markdown: true, tags: [ '<%', '%>' ]}, function(html){
// Do things with the returned html
});
Options
markdown : Whether the view is in Markdown format. Defaults to false
tags : If you are wanting to change the Mustache tags for rendering. Defaults to {{}}. See here.
Routing can be as simple or as complex as you like. You can collect optional parameters, use wildcards and even regex to match your routes. Eg: To match: http://localhost:8080/profile you would do:
moostaka.route('/profile', function(params){
// do stuff
});
You are able to specify optional parameters by doing:
moostaka.route('/profile/:name', function(params){
// do stuff
});
This will match route: http://localhost:8080/profile/JohnSmith (for example) and return the JohnSmith value back in the params as a named object.
The params object will look like:
{
'name': 'JohnSmith'
}
You can also specify pure regex in your route. For example, this will match if only numbers are supplied:
moostaka.route(/^\d+$/, function(params){
// do stuff
});
This will match route: http://localhost:8080/1234 (for example) and return the 1234 value back in the params object as an array.
The params object will look like:
{
'hash': [
'1234'
]
}
Mustache is a simple templating syntax which is used in over 40 different languages. The reach across many different languages means there is a wealth of knowledge and examples across the interwebs.
The main principal of Mustache in our case is the simplicity of using familiar HTML syntax but adding in the double {{}} brackets
to support variables which are to be displayed.
A simple view (or template) to display a persons name is below. Notice the double {{}} surrounding the variable we would like to display:
<div>
Hi my name is <strong>{{personsName}}</strong>
</div>
FAQs
A light weight and easy to use Single Page Application (SPA) framework based on views in Mustache format
We found that moostaka demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.