KO+RJS: Upgrade to KnockoutJS 3.0

Also attempts to bring the markup closer to the architecture example for
KnockoutJS.

index.html

@@ -206,7 +206,7 @@
 							<a href="dependency-examples/flight/" data-source="http://twitter.github.com/flight" data-content="Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.">Flight</a>
 						</li>
 						<li class="labs">
-							<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + RequireJS</a>
+							<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a>
 						</li>
 						<li class="routing labs">
 							<a href="labs/dependency-examples/angularjs_require/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>

labs/dependency-examples/knockoutjs_require/bower.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "todomvc-common": "~0.1.6",
-    "knockout.js": "~2.2.0rc",
+    "knockout.js": "~3.0.0",
     "requirejs": "~2.1.6"
   }
 }

labs/dependency-examples/knockoutjs_require/bower_components/requirejs/require.js

 /** vim: et:ts=4:sw=4:sts=4
- * @license RequireJS 2.1.6 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * @license RequireJS 2.1.9 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
  * Available via the MIT or new BSD license.
  * see: http://github.com/jrburke/requirejs for details
  */
@@ -12,7 +12,7 @@ var requirejs, require, define;
 (function (global) {
     var req, s, head, baseElement, dataMain, src,
         interactiveScript, currentlyAddingScript, mainScript, subPath,
-        version = '2.1.6',
+        version = '2.1.9',
         commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
         cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,
         jsSuffixRegExp = /\.js$/,
@@ -22,7 +22,7 @@ var requirejs, require, define;
         hasOwn = op.hasOwnProperty,
         ap = Array.prototype,
         apsp = ap.splice,
-        isBrowser = !!(typeof window !== 'undefined' && navigator && window.document),
+        isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document),
         isWebWorker = !isBrowser && typeof importScripts !== 'undefined',
         //PS3 indicates loaded and complete, but need to wait for complete
         //specifically. Sequence is 'loading', 'loaded', execution,
@@ -373,7 +373,6 @@ var requirejs, require, define;
         function hasPathFallback(id) {
             var pathConfig = getOwn(config.paths, id);
             if (pathConfig && isArray(pathConfig) && pathConfig.length > 1) {
-                removeScript(id);
                 //Pop off the first array value, since it failed, and
                 //retry
                 pathConfig.shift();
@@ -1464,6 +1463,8 @@ var requirejs, require, define;
                         var map = makeModuleMap(id, relMap, true),
                             mod = getOwn(registry, id);
 
+                        removeScript(id);
+
                         delete defined[id];
                         delete urlFetched[map.url];
                         delete undefEvents[id];
@@ -1609,7 +1610,7 @@ var requirejs, require, define;
 
                     //Join the path parts together, then figure out if baseUrl is needed.
                     url = syms.join('/');
-                    url += (ext || (/\?/.test(url) || skipExt ? '' : '.js'));
+                    url += (ext || (/^data\:|\?/.test(url) || skipExt ? '' : '.js'));
                     url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
                 }
 
@@ -1794,6 +1795,19 @@ var requirejs, require, define;
      */
     req.onError = defaultOnError;
 
+    /**
+     * Creates the node for the load command. Only used in browser envs.
+     */
+    req.createNode = function (config, moduleName, url) {
+        var node = config.xhtml ?
+                document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
+                document.createElement('script');
+        node.type = config.scriptType || 'text/javascript';
+        node.charset = 'utf-8';
+        node.async = true;
+        return node;
+    };
+
     /**
      * Does the request to load a module for the browser case.
      * Make this a separate function to allow other environments
@@ -1808,12 +1822,7 @@ var requirejs, require, define;
             node;
         if (isBrowser) {
             //In the browser so use a script tag
-            node = config.xhtml ?
-                    document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
-                    document.createElement('script');
-            node.type = config.scriptType || 'text/javascript';
-            node.charset = 'utf-8';
-            node.async = true;
+            node = req.createNode(config, moduleName, url);
 
             node.setAttribute('data-requirecontext', context.contextName);
             node.setAttribute('data-requiremodule', moduleName);
@@ -1910,7 +1919,7 @@ var requirejs, require, define;
     }
 
     //Look for a data-main script attribute, which could also adjust the baseUrl.
-    if (isBrowser) {
+    if (isBrowser && !cfg.skipDataMain) {
         //Figure out baseUrl. Get it from the script tag with require.js in it.
         eachReverse(scripts(), function (script) {
             //Set the 'head' where we can append children by

labs/dependency-examples/knockoutjs_require/index.html

@@ -2,7 +2,7 @@
 <html lang="en" data-framework="knockoutjs">
 	<head>
 		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta content="IE=edge" http-equiv="X-UA-Compatible">
 		<title>Knockout.js • TodoMVC</title>
 		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
 	</head>
@@ -10,46 +10,36 @@
 		<section id="todoapp">
 			<header id="header">
 				<h1>todos</h1>
-				<input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
+				<input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
 			</header>
 			<section id="main" data-bind="visible: todos().length">
-				<input id="toggle-all" type="checkbox" data-bind="checked: allCompleted">
+				<input id="toggle-all" data-bind="checked: allCompleted" type="checkbox">
 				<label for="toggle-all">Mark all as complete</label>
 				<ul id="todo-list" data-bind="foreach: todos">
 					<li data-bind="css: { completed: completed, editing: editing }">
 						<div class="view">
-							<input class="toggle" type="checkbox" data-bind="checked: completed">
+							<input class="toggle" data-bind="checked: completed" type="checkbox">
 							<label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
 							<button class="destroy" data-bind="click: $root.remove"></button>
 						</div>
-						<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }" >
+						<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">
 					</li>
 				</ul>
 			</section>
 			<footer id="footer" data-bind="visible: completedCount() || remainingCount()">
 				<span id="todo-count">
-					<strong data-bind="text: remainingCount">1</strong>
-					<span data-bind="text: getLabel( remainingCount )"></span> left
+					<strong data-bind="text: remainingCount">0</strong>
+					<span data-bind="text: getLabel(remainingCount)"></span> left
 				</span>
-				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed (<span data-bind="text: completedCount"></span>)</button>
+				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">
+					Clear completed (<span data-bind="text: completedCount"></span>)
+				</button>
 			</footer>
 		</section>
 		<footer id="info">
-			<p>
-				Double-click to edit a todo
-			</p>
-			<p>
-				Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a>
-			</p>
-			<p>
-				Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net">Ryan Niemeyer</a>
-			</p>
-			<p>
-				Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani">Addy Osmani</a>
-			</p>
-			<p>
-				Adapt app with require.js modules: <a href="https://twitter.com/loicknuchel">Loïc Knuchel</a>
-			</p>
+			<p>Double-click to edit a todo</p>
+			<p>Written by <a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a>, <a href="http://knockmeout.net">Ryan Niemeyer</a> and <a href="https://twitter.com/loicknuchel">Loïc Knuchel</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
 		<script src="bower_components/todomvc-common/base.js"></script>
 		<script data-main="js/main" src="bower_components/requirejs/require.js"></script>

labs/dependency-examples/knockoutjs_require/js/extends/handlers.js

@@ -8,7 +8,7 @@ define([
 
 	// a custom binding to handle the enter key (could go in a separate library)
 	ko.bindingHandlers.enterKey = {
-		init: function (element, valueAccessor, allBindingsAccessor, data) {
+		init: function (element, valueAccessor, allBindingsAccessor, data, bindingContext) {
 			var wrappedHandler;
 			var newValueAccessor;
 
@@ -27,7 +27,7 @@ define([
 			};
 
 			// call the real event binding's init function
-			ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data);
+			ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data, bindingContext);
 		}
 	};