For an MVC framework, the basic concepts go something like this (forgive the simplicity):
var view = 'I say, "{{first}} {{second}}".';
var model = {
first: 'hello',
second: function(){
return 'world';
}
};
for(item in model){
var regex = new RegExp('{{' + item + '}}', 'gi');
if(typeof(item) == 'function')
view = view.replace(regex, model[item]());
else
view = view.replace(regex, model[item]);
}
console.log(view);
Start as simple as possible and add small enhancements:
- Store views/templates as files. This gives you a chance to play with node.js's async file I/O.
- Add support for more complex models - repeating items/arrays, objects containing objects
- Add support for templates inside templates
- Fetch your models from an external datasource. CouchDB might be fun.
- Add proper controllers - these objects should know which models go with which views and how to stitch them together
- Map your Http request urls to controllers and actions - /person/55 might fetch a person with id 55 from your data repository, /person/add might bring up a UI to add a person - both use a person controller with views displayed for the appropriate action.
Take a look at mustache.js for a small template engine. Note their terminology differs from mine in examples and code. What I call a view, they call a template and what I call a model, they call a view. It's a small thing but potentially confusing.
Additional resources: