Pawel Kubera pawelqbera

Basic JavaScript MVC Implementation

Despite being derived from classical MVC pattern JavaScript and the environment it runs in makes Javascript MVC implementation have its own twists. Lets see how typical web MVC functions and then dive into simple, concrete JavaScript MVC implementation.

How Web MVC typically works

Typical server-side MVC implementation has one MVC stack layered behind the singe point of entry. This single point of entry means that all HTTP requests, e.g. http://www.example.com or http://www.example.com/whichever-page/ etc., are routed, by a server configuration, through one point or, to be bold, one file, e.g. index.php.

At that point, there would be an implementation of Front Controller pattern which analyzes HTTP request (URI at first place) and based on it decides which class (Controller) and its method (Action) are to be invoked as a response to the request (method is name for function and member is name for a variable when part of the class/object).

(wherever it says url.com, use your server's domain or IP)

Login to new server as root, then add a deploy user

sudo useradd --create-home -s /bin/bash deploy
sudo adduser deploy sudo
sudo passwd deploy

And Update the new password

	var movies = [];
	var activities = [];
	$('#movie-adder').find('form').on('submit', function(event) {
	event.preventDefault();
	var movie = {
	title: $('#movie-adder').find('[name="title"]').val(),
	year: $('#movie-adder').find('[name="year"]').val(),
	plot: $('#movie-adder').find('[name="plot"]').val(),
	director: $('#movie-adder').find('[name="director"]').val(),
	genre: $('#movie-adder').find('[name="genre"]').val()

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<meta charset="utf-8">
	<title>MovieAdder</title>
	<style id="jsbin-css">
	.module {
	margin: 12px;

	/**
	* Protypal Inheritance in JavaScript
	* - uses prototypal pattern
	*/

	// Helpers and polyfills

	/**
	* Creates instantiation taking an object of newly
	* defined properties as a parameter

	/**
	* (Pseudo)Classical Inheritance in JavaScript
	*/

	// Helpers and polyfills

	/**
	* Copies object's prototype properties
	* to another object's prototype
	*/

	//events - a super-basic Javascript (publish subscribe) pattern

	var events = {
	events: {},
	on: function (eventName, fn) {
	this.events[eventName] = this.events[eventName] \|\| [];
	this.events[eventName].push(fn);
	},
	off: function(eventName, fn) {
	if (this.events[eventName]) {