Knockout API - MOcean Ideally this will be put to use with some type of cascading router, with all required objects being created and rendered on page load, then being subsequently loaded and shown as their route is hit.

gistfile1.js

define([
	'jquery',
	'knockout',
	'text!templates/orders/orderPlacements.html',
	'bindings/orderPlacementsBindings'
], function($, ko, html, PlacementGrid) {

	var Orders = function(params) {

		// CONSTRUCTOR  - START
		// Static variables initialized and set here
		// (i.e. bundles, userDto) data that will remain the same regardless of 
		// data changes

		var self = this;

		// Postal channel opened
		self.channel = postal.channel();

		// Private variables
		var userDto = params.userDto;

		// Public variables

		// el contains the element in the DOM this viewModel will be rendered into
		self.el = params.el;

		self.orders_bundle = params.bundle.PRISMA_PORTAL_ORDERS;
		self.common_bundle = params.bundle.PRISMA_PORTAL_COMMON;
		self.status = ko.observable();
		self.campaignName = ko.observable();
		self.sendComment = ko.observable();
		self.comments = ko.observableArray([]);
		self.userName = ko.observable();
		self.comment = ko.observable();
		self.timeStamp = ko.observable();
		self.gapUrl = ko.observable();
		self.displayedIcons = ko.observableArray([]);
		self.savedRecs = [];
		self.orders = [];

		// CONSTRUCTOR - END


		// Render
		// Binds the viewModel to the html, the bulk of this can 
		// probably be moved into a base class as the code here should not change
		// before/after Render functions can be added for prep/cleanup
		self.render = function() {
			self.beforeRender();

			var $el = $(self.el);
			$el.html(html);

			ko.cleanNode($el.get(0));
			ko.applyBindings(self, $el.get(0));

			self.afterRender();

			return self;
		};

		self.afterRender = function() {
			self.placementGrid = new PlacementGrid({
				enableSend: self.enableSend,
				totals: self.totals
			}).render();
		};

		self.beforeRender = function(){
			// ..
		};

		// Load
		// Used to change dynamic content of the object, should modify
		// any and all observables found in the object and the bound HTML
		// will automatically update.
		// Usually either an already populated DTO will be passed in or an
		// identifier to be used with an ajax call to repopulate the model
		self.load = function(newOrder, history, gapUrl) {

			self.status(newOrder.status);

			self.orders.push(new Order(newOrder));

			history.forEach(function(el) {
				self.orders.push(new Order(el));
			});

			self.campaignName(newOrder.campaignName);
			self.gapUrl(gapUrl);

			return self;
		};


		// Miscelaneous public methods
		self.hide = function(order) {
			//...


		};

		// Misc private functions
		function helperFunction(data){
			//..
		}

	};

	// OPTIONAL: If many instances of this model will be created, it's suggested that
	// functions be moved into the prototype to improve performance. Any functions created inside the CONSTRUCTOR
	// will be created per instance, while functions in the prototype will be static across all instances.

	// Make sure you know what you're doing here
	// SUGGESTED READING: http://davidshariff.com/blog/javascript-inheritance-patterns/
	Orders.prototype.save = function() {
		this.savedRecs.push(this.formatSave());
		this.hide();
	};

	return Orders;
});