Merge branch 'pr/1275'

Close #1275

Merge branch 'pr/1275'
Close #1275
70dce39d · Pascal Hartig · c637306d · 41177bd0 · 70dce39d · 70dce39d
Commit 70dce39d authored May 12, 2015 by Pascal Hartig
12 changed files
--- a/examples/webrx/.gitignore
+++ b/examples/webrx/.gitignore
+node_modules/grunt
+node_modules/grunt-contrib-connect
+
+node_modules/rx/*
+node_modules/rx/dist/*
+!node_modules/rx/dist
+!node_modules/rx/dist/rx.all.js
+
+node_modules/webrx/*
+node_modules/webrx/dist/*
+!node_modules/webrx/dist
+!node_modules/webrx/dist/web.rx.js
+
+node_modules/todomvc-app-css/*
+!node_modules/todomvc-app-css/index.css
+
+node_modules/todomvc-common/*
+!node_modules/todomvc-common/base.css
+!node_modules/todomvc-common/base.js
--- a/examples/webrx/index.html
+++ b/examples/webrx/index.html
+<!doctype html>
+<html data-framework="webrx" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>WebRx - TodoMVC</title>
+		<link href="node_modules/todomvc-common/base.css" rel="stylesheet">
+		<link href="node_modules/todomvc-app-css/index.css" rel="stylesheet">
+	</head>
+	<body>
+		<section id="todoapp">
+			<header id="header">
+				<h1>todos</h1>
+				<input autofocus data-bind="textInput: @current,
+					keyPress: { 'enter': { command: addCmd, parameter: $data } }"
+					id="new-todo" placeholder="What needs to be done?">
+			</header>
+
+			<section data-bind="visible: todos.length" id="main">
+				<input data-bind="checked: remainingCount === 0, command: completeAllCmd" id="toggle-all" type="checkbox">
+				<label for="toggle-all">Mark all as complete</label>
+
+				<ul data-bind="foreach: filteredTodos" id="todo-list">
+					<li data-bind="css: { completed: completed, editing: editing }">
+						<div class="view">
+							<input class="toggle" data-bind="checked: @completed" type="checkbox">
+							<label data-bind="text: title, event: {
+								dblclick: { command: $root.editItemCmd, parameter: $data } }">
+							</label>
+							<button class="destroy" data-bind="command: { command: $root.removeCmd, parameter: $data }">
+							</button>
+						</div>
+
+						<input class="edit" data-bind="textInput: @title,
+							hasFocus: { property: editing, delay: true },
+							event: {
+								blur: { command: $root.saveEditingCmd, parameter: $data } },
+							keyPress: {
+								'enter': { command: $root.saveEditingCmd, parameter: $data },
+								'esc': { command: $root.cancelEditingCmd, parameter: $data } }">
+					</li>
+				</ul>
+			</section>
+
+			<footer data-bind="visible: completedCount || remainingCount" id="footer">
+				<span id="todo-count"><strong data-bind="text: remainingCount">0</strong>
+				<span data-bind="text: remainingCount === 1 ? 'item' : 'items'"></span> left</span>
+
+				<ul id="filters">
+					<li>
+						<a data-bind="sactive: { name: '$', cssClass: 'selected' }, sref: '$'">All</a>
+					</li>
+
+					<li>
+						<a data-bind="sactive: { name: 'active', cssClass: 'selected' }, sref: 'active'">Active</a>
+					</li>
+
+					<li>
+						<a data-bind="sactive: { name: 'completed', cssClass: 'selected' }, sref: 'completed'">Completed</a>
+					</li>
+				</ul>
+
+				<button data-bind="visible: completedCount, command: removeCompletedCmd" id="clear-completed">Clear completed</button>
+			</footer>
+		</section>
+
+		<footer id="info">
+			<p>Double-click to edit a todo</p>
+			<p>Written by <a href="https://github.com/oliverw">Oliver Weichhold</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="node_modules/rx/dist/rx.all.js"></script>
+		<script src="node_modules/webrx/dist/web.rx.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
--- a/examples/webrx/js/app.js
+++ b/examples/webrx/js/app.js
+/*global wx */
+(function () {
+	'use strict';
+
+	var localStorageKey = 'todos-webrx';
+	var displayModeAll = 'all';
+	var displayModeActive = 'active';
+	var displayModeCompleted = 'completed';
+
+	// represent a single todo item
+	function Todo(title, completed) {
+		this.title = wx.property(title);
+		this.completed = wx.property(completed);
+		this.editing = wx.property(false);
+	}
+
+	// our main view model
+	var ViewModel = function (todos) {
+		// map array of passed in todos to an observableArray of Todo objects
+		this.todos = wx.list(todos.map(function (todo) {
+			return new Todo(todo.title, todo.completed);
+		}));
+
+		// we want to get notified of changes to any of the todos contained in the list
+		// not just of structural changes to the list (via "listChanged" obserable).
+		// Those changes are then exposed using the list's "itemChanged" obseravable
+		this.todos.changeTrackingEnabled = true;
+
+		this.current = wx.property();
+		this.showMode = wx.property('all');
+
+		// create a live-filtered projection of the todos collection that will update
+		// when its source (this.todos) or any of its items changes or when when "showMode" changes
+		this.filteredTodos = this.todos.project(function (todo) {
+			switch (this.showMode()) {
+				case displayModeActive:
+					return !todo.completed();
+				case displayModeCompleted:
+					return todo.completed();
+				default:
+					return true;
+			}
+		}.bind(this), this.showMode.changed);
+
+		// add a new entry, when enter key is pressed
+		this.addCmd = wx.command(function () {
+			var current = this.current().trim();
+
+			if (current) {
+				this.todos.push(new Todo(current));
+				this.current('');
+			}
+		}, this);
+
+		// remove a single entry
+		this.removeCmd = wx.command(function (todo) {
+			this.todos.remove(todo);
+		}, this);
+
+		// mark all todos complete/incomplete
+		this.completeAllCmd = wx.command(function () {
+			this.todos.forEach(function (todo) {
+				todo.completed(this.remainingCount());
+			}, this);
+		}, this);
+
+		// remove all completed entries
+		this.removeCompletedCmd = wx.command(function () {
+			this.todos.filter(function (todo) {
+				return todo.completed();
+			}).forEach(function (item) {
+				this.todos.remove(item);
+			}, this);
+		}, this);
+
+		// edit an item
+		this.editItemCmd = wx.command(function (item) {
+			item.editing(true);
+			item.previousTitle = item.title();
+		}, this);
+
+		// cancel editing an item and revert to the previous content
+		this.cancelEditingCmd = wx.command(function (item) {
+			item.editing(false);
+			item.title(item.previousTitle);
+		}, this);
+
+		// stop editing an item, remove the item, if it is now empty
+		this.saveEditingCmd = wx.command(function (item) {
+			item.editing(false);
+			var title = item.title();
+			var trimmedTitle = title.trim();
+
+			if (title !== trimmedTitle) {
+				item.title(trimmedTitle);
+			}
+
+			if (!trimmedTitle) {
+				this.todos.remove(item);
+			}
+		}, this);
+
+		this.countCompleted = function () {
+			return this.todos.filter(function (todo) {
+				return todo.completed();
+			}).length;
+		};
+
+		// create an observable output-property representing all completed todos
+		this.completedCount = Rx.Observable.merge(this.todos.listChanged, this.todos.itemChanged)
+			.select(this.countCompleted, this)
+			.toProperty(this.countCompleted());
+
+		this.countRemaining = function () {
+			return this.todos.length() - this.completedCount();
+		};
+
+		// create an observable output-property representing all todos that are not complete
+		this.remainingCount = Rx.Observable.merge(this.todos.listChanged, this.todos.itemChanged)
+			.select(this.countRemaining, this)
+			.toProperty(this.countRemaining());
+
+		// setup routing
+		var self = this;
+
+		// Configure the Base-Url for all states (in a production-setup you would probably
+		// pass this from server to client via a custom query-parameter or something similar)
+		wx.router.baseUrl = '/examples/webrx/';
+
+		wx.router.state({
+			name: '$',
+			onEnter: function () {
+				self.showMode(displayModeAll);
+			}
+		}).state({
+			name: 'active',
+			onEnter: function () {
+				self.showMode(displayModeActive);
+			}
+		}).state({
+			name: 'completed',
+			onEnter: function () {
+				self.showMode(displayModeCompleted);
+			}
+		});
+
+		// reload root state ($)
+		wx.router.reload();
+
+		// persistence
+		Rx.Observable.merge(this.todos.listChanged, this.todos.itemChanged)
+			.throttle(500)
+			.subscribeOnNext(function () {
+				localStorage.setItem(localStorageKey, JSON.stringify(this.todos.map(function (x) {
+					return { title: x.title(), completed: x.completed() };
+				})));
+			}, this);
+	};
+
+	// check local storage for todos
+	var todos = JSON.parse(localStorage.getItem(localStorageKey));
+
+	// bind a new instance of our view model to the page
+	var viewModel = new ViewModel(todos || []);
+	wx.applyBindings(viewModel);
+}());
--- a/examples/webrx/node_modules/rx/dist/rx.all.js
+++ b/examples/webrx/node_modules/rx/dist/rx.all.js
--- a/examples/webrx/node_modules/todomvc-app-css/index.css
+++ b/examples/webrx/node_modules/todomvc-app-css/index.css
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+	outline: none;
+}
+
+.hidden {
+	display: none;
+}
+
+#todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+#todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+#todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+#todo-list li .toggle:checked:after {
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+#todo-list li label {
+	white-space: pre;
+	word-break: break-word;
+	padding: 15px 60px 15px 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+#todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+#todo-list li .destroy:after {
+	content: '×';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#todo-count strong {
+	font-weight: 300;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+#filters li a.selected,
+#filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+#filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+#clear-completed,
+html #clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+	position: relative;
+}
+
+#clear-completed:hover {
+	text-decoration: underline;
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+#info p {
+	line-height: 1;
+}
+
+#info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+#info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@media (max-width: 430px) {
+	#footer {
+		height: 50px;
+	}
+
+	#filters {
+		bottom: 10px;
+	}
+}
--- a/examples/webrx/node_modules/todomvc-common/base.css
+++ b/examples/webrx/node_modules/todomvc-common/base.css
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
--- a/examples/webrx/node_modules/todomvc-common/base.js
+++ b/examples/webrx/node_modules/todomvc-common/base.js
+/* global _ */
+(function () {
+	'use strict';
+
+	/* jshint ignore:start */
+	// Underscore's Template Module
+	// Courtesy of underscorejs.org
+	var _ = (function (_) {
+		_.defaults = function (object) {
+			if (!object) {
+				return object;
+			}
+			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
+				var iterable = arguments[argsIndex];
+				if (iterable) {
+					for (var key in iterable) {
+						if (object[key] == null) {
+							object[key] = iterable[key];
+						}
+					}
+				}
+			}
+			return object;
+		}
+
+		// By default, Underscore uses ERB-style template delimiters, change the
+		// following template settings to use alternative delimiters.
+		_.templateSettings = {
+			evaluate    : /<%([\s\S]+?)%>/g,
+			interpolate : /<%=([\s\S]+?)%>/g,
+			escape      : /<%-([\s\S]+?)%>/g
+		};
+
+		// When customizing `templateSettings`, if you don't want to define an
+		// interpolation, evaluation or escaping regex, we need one that is
+		// guaranteed not to match.
+		var noMatch = /(.)^/;
+
+		// Certain characters need to be escaped so that they can be put into a
+		// string literal.
+		var escapes = {
+			"'":      "'",
+			'\\':     '\\',
+			'\r':     'r',
+			'\n':     'n',
+			'\t':     't',
+			'\u2028': 'u2028',
+			'\u2029': 'u2029'
+		};
+
+		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+		// JavaScript micro-templating, similar to John Resig's implementation.
+		// Underscore templating handles arbitrary delimiters, preserves whitespace,
+		// and correctly escapes quotes within interpolated code.
+		_.template = function(text, data, settings) {
+			var render;
+			settings = _.defaults({}, settings, _.templateSettings);
+
+			// Combine delimiters into one regular expression via alternation.
+			var matcher = new RegExp([
+				(settings.escape || noMatch).source,
+				(settings.interpolate || noMatch).source,
+				(settings.evaluate || noMatch).source
+			].join('|') + '|$', 'g');
+
+			// Compile the template source, escaping string literals appropriately.
+			var index = 0;
+			var source = "__p+='";
+			text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
+				source += text.slice(index, offset)
+					.replace(escaper, function(match) { return '\\' + escapes[match]; });
+
+				if (escape) {
+					source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+				}
+				if (interpolate) {
+					source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+				}
+				if (evaluate) {
+					source += "';\n" + evaluate + "\n__p+='";
+				}
+				index = offset + match.length;
+				return match;
+			});
+			source += "';\n";
+
+			// If a variable is not specified, place data values in local scope.
+			if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+			source = "var __t,__p='',__j=Array.prototype.join," +
+				"print=function(){__p+=__j.call(arguments,'');};\n" +
+				source + "return __p;\n";
+
+			try {
+				render = new Function(settings.variable || 'obj', '_', source);
+			} catch (e) {
+				e.source = source;
+				throw e;
+			}
+
+			if (data) return render(data, _);
+			var template = function(data) {
+				return render.call(this, data, _);
+			};
+
+			// Provide the compiled function source as a convenience for precompilation.
+			template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+			return template;
+		};
+
+		return _;
+	})({});
+
+	if (location.hostname === 'todomvc.com') {
+		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+	/* jshint ignore:end */
+
+	function redirect() {
+		if (location.hostname === 'tastejs.github.io') {
+			location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
+		}
+	}
+
+	function findRoot() {
+		var base = location.href.indexOf('examples/');
+		return location.href.substr(0, base);
+	}
+
+	function getFile(file, callback) {
+		if (!location.host) {
+			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
+		}
+
+		var xhr = new XMLHttpRequest();
+
+		xhr.open('GET', findRoot() + file, true);
+		xhr.send();
+
+		xhr.onload = function () {
+			if (xhr.status === 200 && callback) {
+				callback(xhr.responseText);
+			}
+		};
+	}
+
+	function Learn(learnJSON, config) {
+		if (!(this instanceof Learn)) {
+			return new Learn(learnJSON, config);
+		}
+
+		var template, framework;
+
+		if (typeof learnJSON !== 'object') {
+			try {
+				learnJSON = JSON.parse(learnJSON);
+			} catch (e) {
+				return;
+			}
+		}
+
+		if (config) {
+			template = config.template;
+			framework = config.framework;
+		}
+
+		if (!template && learnJSON.templates) {
+			template = learnJSON.templates.todomvc;
+		}
+
+		if (!framework && document.querySelector('[data-framework]')) {
+			framework = document.querySelector('[data-framework]').dataset.framework;
+		}
+
+		this.template = template;
+
+		if (learnJSON.backend) {
+			this.frameworkJSON = learnJSON.backend;
+			this.frameworkJSON.issueLabel = framework;
+			this.append({
+				backend: true
+			});
+		} else if (learnJSON[framework]) {
+			this.frameworkJSON = learnJSON[framework];
+			this.frameworkJSON.issueLabel = framework;
+			this.append();
+		}
+
+		this.fetchIssueCount();
+	}
+
+	Learn.prototype.append = function (opts) {
+		var aside = document.createElement('aside');
+		aside.innerHTML = _.template(this.template, this.frameworkJSON);
+		aside.className = 'learn';
+
+		if (opts && opts.backend) {
+			// Remove demo link
+			var sourceLinks = aside.querySelector('.source-links');
+			var heading = sourceLinks.firstElementChild;
+			var sourceLink = sourceLinks.lastElementChild;
+			// Correct link path
+			var href = sourceLink.getAttribute('href');
+			sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
+			sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
+		} else {
+			// Localize demo links
+			var demoLinks = aside.querySelectorAll('.demo-link');
+			Array.prototype.forEach.call(demoLinks, function (demoLink) {
+				if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
+					demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
+				}
+			});
+		}
+
+		document.body.className = (document.body.className + ' learn-bar').trim();
+		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
+	};
+
+	Learn.prototype.fetchIssueCount = function () {
+		var issueLink = document.getElementById('issue-count-link');
+		if (issueLink) {
+			var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url, true);
+			xhr.onload = function (e) {
+				var parsedResponse = JSON.parse(e.target.responseText);
+				if (parsedResponse instanceof Array) {
+					var count = parsedResponse.length
+					if (count !== 0) {
+						issueLink.innerHTML = 'This app has ' + count + ' open issues';
+						document.getElementById('issue-count').style.display = 'inline';
+					}
+				}
+			};
+			xhr.send();
+		}
+	};
+
+	redirect();
+	getFile('learn.json', Learn);
+})();
--- a/examples/webrx/node_modules/webrx/dist/web.rx.js
+++ b/examples/webrx/node_modules/webrx/dist/web.rx.js
--- a/examples/webrx/package.json
+++ b/examples/webrx/package.json
+{
+  "private": true,
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-connect": "^0.9.0"
+  },
+  "dependencies": {
+    "rx": "~2.5.2",
+    "todomvc-app-css": "^1.0.0",
+    "todomvc-common": "^1.0.1",
+    "webrx": "~0.9.75"
+  }
+}
--- a/examples/webrx/readme.md
+++ b/examples/webrx/readme.md
+# Webrx TodoMVC Example
+
+## About WebRx
+
+WebRx is a browser-based MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing.
+
+The framework is written in [Typescript](http://www.typescriptlang.org/) and built on top of [ReactiveX for Javascript (RxJs)](http://reactivex.io) which is a
+powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.
+
+## Routing
+
+The routing implementation in the example uses the HTML5 history and thus does
+not create valid URLs when run without a proper server configuration. This issue
+is tracked as [#1293](https://github.com/tastejs/todomvc/issues/1293).
+
+## TodoMVC
+
+This TodoMVC implementation demonstrates many of the framework's built-in core features:
+
+- [View-Models](http://webrxjs.org/docs#topic-mvvm-intro)
+- [Observable Properties](http://webrxjs.org/docs/observable-properties.html) and [Output Properties](http://webrxjs.org/docs/output-properties.html)
+- [Observable Lists](http://webrxjs.org/docs/observable-lists.html) and Projections
+- [Commands](http://webrxjs.org/docs/commands.html)
+- [Data-Binding](http://webrxjs.org/docs/binding-syntax.html)
+- [Routing](http://webrxjs.org/docs/routing-overview.html)
+
+## Learning WebRx
+
+Here are some links you may find helpful:
+
+* [Website](http://webrxjs.org) is a great resource for getting started.
+* [Documentation](http://webrxjs.org/docs/)
--- a/index.html
+++ b/index.html
@@ -275,6 +275,9 @@
 								<li class="routing">
 									<a href="examples/foam/" data-source="http://foam-framework.github.io/foam/" data-content="FOAM is a deeply MVC Javascript metaprogramming framework being developed by a team at Google.">FOAM</a>
 								</li>
+								<li class="routing">
+									<a href="examples/webrx/" data-source="http://webrxjs.org" data-content="WebRx is a Javascript MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.">WebRx</a>
+								</li>
 							</ul>
 						</div>


--- a/learn.json
+++ b/learn.json
@@ -2252,6 +2252,40 @@
 			}]
 		}]
 	},
+	"webrx": {
+		"name": "WebRx",
+		"description": "WebRx is a browser-based MVVM-Framework written in Typescript that combines functional-reactive programming with declarative Data-Binding and Templating.",
+		"homepage": "webrxjs.org",
+		"examples": [{
+			"name": "Example",
+			"url": "examples/webrx"
+		}],
+		"link_groups": [{
+			"heading": "Official Resources",
+			"links": [{
+				"name": "Tutorial",
+				"url": "http://webrxjs.org/docs/getting-started.html"
+			}, {
+				"name": "API Reference",
+				"url": "http://webrxjs.org/api/modules/_interfaces_.wx.html"
+			}, {
+				"name": "Documentation",
+				"url": "http://webrxjs.org/docs"
+			}, {
+				"name": "Live examples",
+				"url": "http://webrxjs.org/docs/examples.html"
+			}]
+		}, {
+			"heading": "Community",
+			"links": [{
+				"name": "WebRx on Stack Overflow",
+				"url": "http://stackoverflow.com/questions/tagged/webrx"
+			}, {
+				"name": "WebRx on Twitter",
+				"url": "http://twitter.com/webrxjs"
+			}]
+		}]
+	},
 	"templates": {
 		"todomvc": "<header> <h3><%= name %></h3> <span class=\"source-links\"> <% if (typeof examples !== 'undefined') { %> <% examples.forEach(function (example) { %> <h5><%= example.name %></h5> <% if (!location.href.match(example.url + '/')) { %> <a class=\"demo-link\" data-type=\"<%= example.type === 'backend' ? 'external' : 'local' %>\" href=\"<%= example.url %>\">Demo</a>, <% } if (example.type === 'backend') { %><a href=\"<%= example.source_url %>\"><% } else { %><a href=\"https://github.com/tastejs/todomvc/tree/gh-pages/<%= example.source_url ? example.source_url : example.url %>\"><% } %>Source</a> <% }); %> <% } %> </span> </header> <hr> <blockquote class=\"quote speech-bubble\"> <p><%= description %></p> <footer> <a href=\"http://<%= homepage %>\"><%= name %></a> </footer> </blockquote> <% if (typeof link_groups !== 'undefined') { %> <hr> <% link_groups.forEach(function (link_group) { %> <h4><%= link_group.heading %></h4> <ul> <% link_group.links.forEach(function (link) { %> <li> <a href=\"<%= link.url %>\"><%= link.name %></a> </li> <% }); %> </ul> <% }); %> <% } %> <footer> <hr> <em>If you have other helpful links to share, or find any of the links above no longer work, please <a href=\"https://github.com/tastejs/todomvc/issues\">let us know</a>.</em> </footer>"
 	}