ViewManager.js for rendering Backbone views asynchronously using any web server framework.

ViewManager JS.md

ViewManager.js - Server-side rendered templates for Single Page Backbone Applications

To render views using the ViewManager, add a getTemplate function to your view. Since the ViewManager returns the jQuery AJAX deferred object, the views gets access to all the callbacks etc.

The WaitSpinnerView has a dependency on spin.js: http://fgnass.github.com/spin.js/

App.Views.CommentEditView = Backbone.View.extend({

	tagName: "div",

	className: "edit-comment",

	events: {
	},

	initialize: function (options) {
		_.bindAll(this, "render");
	},

	getTemplate: function () {
		return App.ViewManager.getViewTemplate("/Comments/RenderEditView", { id: this.model.get("Id") });
	},

	render: function () {
		var that = this;

		this.$el.append(new App.Views.WaitSpinnerView().render().el);

		this.getTemplate().done(function (response, status, jqxhr) {
			that.$el.html(response);
		});

		return this;
	}
});

ViewManager.js

(function () {

  App.ViewManager = {

		getViewTemplate: function (relativeRenderUrl, postData) {

			if (!postData) {
				postData = {};
			}

			return $.ajax(relativeRenderUrl, {
				type: "GET",
				contentType: "text/html; charset=utf-8",
				data: postData
			});
		},

		getViewTemplateForModel: function (relativeRenderUrl, model) {

			if (!model) {
				model = {};
			}

			return $.ajax(relativeRenderUrl, {
				type: "POST",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				data: JSON.stringify({ model: model })
			});
		},

		getViewTemplateWithPostData: function (relativeRenderUrl, postData) {

			if (!postData) {
				postData = {};
			}

			return $.ajax(relativeRenderUrl, {
				type: "POST",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				data: JSON.stringify(postData)
			});
		}

	};

})();

WaitSpinnerView.js

(function () {

  App.Views.WaitSpinnerView = Backbone.View.extend({

		tagName: "div",

		className: "wait-spinner clearfix",

		initialize: function () {
			_.bindAll(this, "render");

			this.options = {
				lines: 13, // The number of lines to draw
				length: 8, // The length of each line
				width: 3, // The line thickness
				radius: 10, // The radius of the inner circle
				corners: 1, // Corner roundness (0..1)
				rotate: 0, // The rotation offset
				color: "#000", // #rgb or #rrggbb
				speed: 1, // Rounds per second
				trail: 45, // Afterglow percentage
				shadow: false, // Whether to render a shadow
				hwaccel: false, // Whether to use hardware acceleration
				className: "spinner", // The CSS class to assign to the spinner
				zIndex: 2e9, // The z-index (defaults to 2000000000)
				top: "auto", // Top position relative to parent in px
				left: "auto" // Left position relative to parent in px
			};
		},

		render: function () {
			Spinner(this.options).spin(this.el);

			return this;
		}

	});

})();