Minimalistic MVC framework for javascript web applications
<html>
<body>
<view></view> <!-- Templates will be rendered here -->
<script src="/app/app.js"></script>
</body>
</html>app.js
var app = new MNML();Use app.route to define your router, note that the controllers are optional.
app.route([
{ path: '/', template: '/templates/home.html' },
{ path: '/hello/:name', template: '/templates/params.html', controller: 'params' }
]);This controller is fired before any controller.
app.appController(function(data){
console.log('Pre-controller', data);
});app.controller('params', function(name){
this.name = name;
});To assign a property of the controller to a view, use: {{ property }}.
/templates/params.html
<div>
<h2>Hello {{ name }}!</h2>
<input type="text" model="name"/>
</div>You can assign a controller to a div using the controller directive, for example:
<div controller="params">
Hello {{ name }}!
</div>The include directive allows to attach a view inside an element, example:
<div include="/templates/example.html"></div>This directive receives an object as a parameter, where properties are the classes and the values are the conditions.
<ul class="nav">
<li if-class="{ active: status, inactive: !status }">Link</li>
</ul>Equivalence in javascript, (So just an example):
if (status) {
li.className = 'active';
}
if (!status) {
li.className = 'inactive';
}app.controller('nav', function(){
this.links = [
{ title: 'Home', href: '/' }
{ title: 'Another page', href: '/page' }
];
});<ul class="nav">
<li foreach="link in links">
<a href="{{ link.href }}">{{ link.title }}</a>
</li>
</ul>MNML has a mediator allowing us to use events in our application.
With addEvent we add our event and assign a callback.
app.controller('nav', function(){
var self = this;
self.page = 'home';
app.addEvent('changePage', function(page){
self.page = page;
});
});With fireEvent we execute our event and we send data as the second parameter.
app.controller('about', function(){
app.fireEvent('changePage', 'about');
});Use removeEvent to remove an event.
app.removeEvent('changePage');