Patterns

There are several ways you can write your app and miso is not opinionated about how you go about this so it is important that you choose a pattern that suits your needs. Below are a few suggested patterns to follow when developing apps.

Note: miso is a single page app that loads server rendered HTML from any URL, so that SEO works out of the box.

Single url mvc

In this pattern everything that your mvc needs to do is done on a single url for all the associated actions. The advantage for this style of development is that you have everything in one mvc container, and you don't need to map any routes - of course the downside being that there are no routes for the user to bookmark. This is pattern works well for smaller entities where there are not too many interactions that the user can do - this is essentially how most mithril apps are written - self-contained, and at a single url.

Here is a "hello world" example using the single url pattern

var m = require('mithril'),
	sugartags = require('../server/mithril.sugartags.node.js')(m);

var self = module.exports.index = {
	models: {
		//	Our model
		hello: function(data){
			this.who = m.p(data.who);
		}
	},
	controller: function(params) {
		this.model = new self.models.hello({who: "world"});
		return this;
	},
	view: function(ctrl) {
		var model = ctrl.model;
		with(sugartags) {
			return [
				DIV("Hello " + model.who())
			];
		}
	}
};

This would expose a url /hellos (note: the 's'), and would display "Hello world". (You can change the route using custom routing)

Multi url mvc

In this pattern we expose multiple mvc routes that in turn translate to multiple URLs. This is useful for splitting up your app, and ensuring each mvc has its own sets of concerns.

var m = require('mithril'),
	miso = require('../server/miso.util.js'),
	sugartags = require('../server/mithril.sugartags.node.js')(m);

var index = module.exports.index = {
	models: {
		//	Our model
		hello: function(data){
			this.who = m.p(data.who);
		}
	},
	controller: function(params) {
		this.model = new index.models.hello({who: "world"});
		return this;
	},
	view: function(ctrl) {
		var model = ctrl.model;
		with(sugartags) {
			return [
				DIV("Hello " + model.who()),
				A({href: "/hello/Leo", config: m.route}, "Click me for the edit action")
			];
		}
	}
};

var edit = module.exports.edit = {
	controller: function(params) {
		var who = miso.getParam('hello_id', params);
		this.model = new index.models.hello({who: who});
		return this;
	},
	view: function(ctrl) {
		var model = ctrl.model;
		with(sugartags) {
			return [
				DIV("Hello " + model.who())
			];
		}
	}
};

Here we also expose a "/hello/[NAME]" url, that will show your name when you visit /hello/[YOUR NAME], so there are now multiple urls for our SPA:

• /hellos - this is intended to be an index page that lists all your "hellos"
• /hello/[NAME] - this is intended to be an edit page where you can edit your "hellos"

Note that the anchor tag has config: m.route in it's options - this is so that we can route automatically though mithril