diff --git a/labs/dependency-examples/durandal/bower.json b/labs/dependency-examples/durandal/bower.json index 676eeeaf6b..7fb6b79fa1 100644 --- a/labs/dependency-examples/durandal/bower.json +++ b/labs/dependency-examples/durandal/bower.json @@ -1,12 +1,12 @@ { - "name": "todomvc-durandal", - "version": "0.0.0", - "dependencies": { - "durandal": "~1.2.0", - "sammy": "~0.7.4", - "jquery": "~1.9.1", - "knockout": "~2.2.1", - "todomvc-common": "~0.1.4", - "requirejs": "~2.1.6" - } + "name": "todomvc-durandal", + "version": "0.0.0", + "dependencies": { + "durandal": "~1.2.0", + "sammy": "~0.7.4", + "jquery": "~1.9.1", + "knockout": "~2.2.1", + "todomvc-common": "~0.1.4", + "requirejs": "~2.1.6" + } } diff --git a/labs/dependency-examples/durandal/index.html b/labs/dependency-examples/durandal/index.html index 9999103893..20d9537ca1 100644 --- a/labs/dependency-examples/durandal/index.html +++ b/labs/dependency-examples/durandal/index.html @@ -5,22 +5,22 @@ Durandal • TodoMVC - - + +
-
-
- Durandal ToDo MVC loading... -
-
-
+
+
+ Durandal ToDo MVC loading... +
+
+ - - - + + + diff --git a/labs/dependency-examples/durandal/js/main.js b/labs/dependency-examples/durandal/js/main.js index 52d4c027f5..dd4e700e97 100644 --- a/labs/dependency-examples/durandal/js/main.js +++ b/labs/dependency-examples/durandal/js/main.js @@ -2,81 +2,81 @@ 'use strict'; requirejs.config({ - paths: { - 'text': 'bower_components/durandal/amd/text' - }, - baseUrl: './' + paths: { + 'text': 'bower_components/durandal/amd/text' + }, + baseUrl: './' }); var ENTER_KEY = 13; // a custom binding to handle the enter key (could go in a separate library) ko.bindingHandlers.enterKey = { - init: function (element, valueAccessor, allBindingsAccessor, data) { - var wrappedHandler, newValueAccessor; + init: function (element, valueAccessor, allBindingsAccessor, data) { + var wrappedHandler, newValueAccessor; - // wrap the handler with a check for the enter key - wrappedHandler = function (data, event) { - if (event.keyCode === ENTER_KEY) { - valueAccessor().call(this, data, event); - } - }; + // wrap the handler with a check for the enter key + wrappedHandler = function (data, event) { + if (event.keyCode === ENTER_KEY) { + valueAccessor().call(this, data, event); + } + }; - // create a valueAccessor with the options that we would want to pass to the event binding - newValueAccessor = function () { - return { - keyup: wrappedHandler - }; - }; + // create a valueAccessor with the options that we would want to pass to the event binding + newValueAccessor = function () { + return { + keyup: wrappedHandler + }; + }; - // call the real event binding's init function - ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data); - } + // call the real event binding's init function + ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data); + } }; // wrapper to hasfocus that also selects text and applies focus async ko.bindingHandlers.selectAndFocus = { - init: function (element, valueAccessor, allBindingsAccessor) { - ko.bindingHandlers.hasfocus.init(element, valueAccessor, allBindingsAccessor); - ko.utils.registerEventHandler(element, 'focus', function () { - element.focus(); - }); - }, - update: function (element, valueAccessor) { - ko.utils.unwrapObservable(valueAccessor()); // for dependency - // ensure that element is visible before trying to focus - setTimeout(function () { - ko.bindingHandlers.hasfocus.update(element, valueAccessor); - }, 0); - } + init: function (element, valueAccessor, allBindingsAccessor) { + ko.bindingHandlers.hasfocus.init(element, valueAccessor, allBindingsAccessor); + ko.utils.registerEventHandler(element, 'focus', function () { + element.focus(); + }); + }, + update: function (element, valueAccessor) { + ko.utils.unwrapObservable(valueAccessor()); // for dependency + // ensure that element is visible before trying to focus + setTimeout(function () { + ko.bindingHandlers.hasfocus.update(element, valueAccessor); + }, 0); + } }; define(['bower_components/durandal/app', - 'bower_components/durandal/viewLocator', - 'bower_components/durandal/system', - 'bower_components/durandal/plugins/router'], - function (app, viewLocator, system, router) { + 'bower_components/durandal/viewLocator', + 'bower_components/durandal/system', + 'bower_components/durandal/plugins/router'], + function (app, viewLocator, system, router) { - //>>excludeStart("build", true); - system.debug(true); - //>>excludeEnd("build"); + //>>excludeStart("build", true); + system.debug(true); + //>>excludeEnd("build"); - app.title = 'Durandal Starter Kit'; - app.start().then(function () { - //Replace 'viewmodels' in the moduleId with 'views' to locate the view. - //Look for partial views in a 'views' folder in the root. - viewLocator.useConvention(); + app.title = 'Durandal Starter Kit'; + app.start().then(function () { + //Replace 'viewmodels' in the moduleId with 'views' to locate the view. + //Look for partial views in a 'views' folder in the root. + viewLocator.useConvention(); - //configure routing - router.useConvention('js/viewmodels'); - router.mapNav('todoapp'); - // router.mapNav('flickr'); + //configure routing + router.useConvention('js/viewmodels'); + router.mapNav('todoapp'); + // router.mapNav('flickr'); - app.adaptToDevice(); + app.adaptToDevice(); - //Show the app by setting the root view model for our application with a transition. - app.setRoot('js/viewmodels/shell'); - }); - }); \ No newline at end of file + //Show the app by setting the root view model for our application with a transition. + app.setRoot('js/viewmodels/shell'); + }); + }); \ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/viewmodels/entry.js b/labs/dependency-examples/durandal/js/viewmodels/entry.js index 21a89793aa..d4584609af 100644 --- a/labs/dependency-examples/durandal/js/viewmodels/entry.js +++ b/labs/dependency-examples/durandal/js/viewmodels/entry.js @@ -3,22 +3,22 @@ define([ 'bower_components/durandal/app' ], function (app) { - 'use strict'; + 'use strict'; - var ViewModel = function () { - var self = this; - // store the new todo value being entered - self.current = ko.observable(); + var ViewModel = function () { + var self = this; + // store the new todo value being entered + self.current = ko.observable(); - // add a new todo, when enter key is pressed - self.add = function () { - var current = self.current().trim(); - if (current) { - app.trigger('todoitem', current); - self.current(''); - } - }; - }; + // add a new todo, when enter key is pressed + self.add = function () { + var current = self.current().trim(); + if (current) { + app.trigger('todoitem', current); + self.current(''); + } + }; + }; - return ViewModel; + return ViewModel; }); \ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/viewmodels/list.js b/labs/dependency-examples/durandal/js/viewmodels/list.js index 9fad9957a9..1d034ef1d6 100644 --- a/labs/dependency-examples/durandal/js/viewmodels/list.js +++ b/labs/dependency-examples/durandal/js/viewmodels/list.js @@ -1,124 +1,124 @@ /*global define, ko */ define([ - 'bower_components/durandal/app' + 'bower_components/durandal/app' ], function (app) { - 'use strict'; - // represent a single todo item - - var Todo = function (title, completed) { - this.title = ko.observable(title); - this.completed = ko.observable(completed); - this.editing = ko.observable(false); - }; - - var ViewModel = function () { - var self = this; - - self.activate = function () { - // // check local storage for todos - var todosFromlocalStorage = ko.utils.parseJson(localStorage.getItem('todos-durandal')); - - todosFromlocalStorage = ko.utils.arrayMap(todosFromlocalStorage, function (todo) { - return new Todo(todo.title, todo.completed); - }); - - self.todos(todosFromlocalStorage); - - // internal computed observable that fires whenever anything changes in our todos - ko.computed(function () { - // store a clean copy to local storage, which also creates a dependency on the observableArray and all observables in each item - localStorage.setItem('todos-durandal', ko.toJSON(self.todos())); - }).extend({ - throttle: 500 - }); // save at most twice per second - - }; - - app.on('todoitem', function (item) { - self.todos.push(new Todo(item)); - }); - - // map array of passed in todos to an observableArray of Todo objects - self.todos = ko.observableArray(); - - self.showMode = ko.observable('all'); - - self.filteredTodos = ko.computed(function () { - switch (self.showMode()) { - case 'active': - return self.todos().filter(function (todo) { - return !todo.completed(); - }); - case 'completed': - return self.todos().filter(function (todo) { - return todo.completed(); - }); - default: - return self.todos(); - } - }); - - // remove a single todo - self.remove = function (todo) { - self.todos.remove(todo); - }; - - // remove all completed todos - self.removeCompleted = function () { - self.todos.remove(function (todo) { - return todo.completed(); - }); - }; - - // edit an item - self.editItem = function (item) { - item.editing(true); - }; - - // stop editing an item. Remove the item, if it is now empty - self.stopEditing = function (item) { - item.editing(false); - - if (!item.title().trim()) { - self.remove(item); - } - }; - - // count of all completed todos - self.completedCount = ko.computed(function () { - return ko.utils.arrayFilter(self.todos(), function (todo) { - return todo.completed(); - }).length; - }); - - // count of todos that are not complete - self.remainingCount = ko.computed(function () { - return self.todos().length - self.completedCount(); - }); - - // writeable computed observable to handle marking all complete/incomplete - self.allCompleted = ko.computed({ - //always return true/false based on the done flag of all todos - read: function () { - return !self.remainingCount(); - }, - // set all todos to the written value (true/false) - write: function (newValue) { - ko.utils.arrayForEach(self.todos(), function (todo) { - // set even if value is the same, as subscribers are not notified in that case - todo.completed(newValue); - }); - } - }); - - // helper function to keep expressions out of markup - self.getLabel = function (count) { - return ko.utils.unwrapObservable(count) === 1 ? 'item' : 'items'; - }; - - }; - - - return ViewModel; + 'use strict'; + // represent a single todo item + + var Todo = function (title, completed) { + this.title = ko.observable(title); + this.completed = ko.observable(completed); + this.editing = ko.observable(false); + }; + + var ViewModel = function () { + var self = this; + + self.activate = function () { + // // check local storage for todos + var todosFromlocalStorage = ko.utils.parseJson(localStorage.getItem('todos-durandal')); + + todosFromlocalStorage = ko.utils.arrayMap(todosFromlocalStorage, function (todo) { + return new Todo(todo.title, todo.completed); + }); + + self.todos(todosFromlocalStorage); + + // internal computed observable that fires whenever anything changes in our todos + ko.computed(function () { + // store a clean copy to local storage, which also creates a dependency on the observableArray and all observables in each item + localStorage.setItem('todos-durandal', ko.toJSON(self.todos())); + }).extend({ + throttle: 500 + }); // save at most twice per second + + }; + + app.on('todoitem', function (item) { + self.todos.push(new Todo(item)); + }); + + // map array of passed in todos to an observableArray of Todo objects + self.todos = ko.observableArray(); + + self.showMode = ko.observable('all'); + + self.filteredTodos = ko.computed(function () { + switch (self.showMode()) { + case 'active': + return self.todos().filter(function (todo) { + return !todo.completed(); + }); + case 'completed': + return self.todos().filter(function (todo) { + return todo.completed(); + }); + default: + return self.todos(); + } + }); + + // remove a single todo + self.remove = function (todo) { + self.todos.remove(todo); + }; + + // remove all completed todos + self.removeCompleted = function () { + self.todos.remove(function (todo) { + return todo.completed(); + }); + }; + + // edit an item + self.editItem = function (item) { + item.editing(true); + }; + + // stop editing an item. Remove the item, if it is now empty + self.stopEditing = function (item) { + item.editing(false); + + if (!item.title().trim()) { + self.remove(item); + } + }; + + // count of all completed todos + self.completedCount = ko.computed(function () { + return ko.utils.arrayFilter(self.todos(), function (todo) { + return todo.completed(); + }).length; + }); + + // count of todos that are not complete + self.remainingCount = ko.computed(function () { + return self.todos().length - self.completedCount(); + }); + + // writeable computed observable to handle marking all complete/incomplete + self.allCompleted = ko.computed({ + //always return true/false based on the done flag of all todos + read: function () { + return !self.remainingCount(); + }, + // set all todos to the written value (true/false) + write: function (newValue) { + ko.utils.arrayForEach(self.todos(), function (todo) { + // set even if value is the same, as subscribers are not notified in that case + todo.completed(newValue); + }); + } + }); + + // helper function to keep expressions out of markup + self.getLabel = function (count) { + return ko.utils.unwrapObservable(count) === 1 ? 'item' : 'items'; + }; + + }; + + + return ViewModel; }); \ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/viewmodels/shell.js b/labs/dependency-examples/durandal/js/viewmodels/shell.js index 1aac755838..cd3eb5f3b4 100644 --- a/labs/dependency-examples/durandal/js/viewmodels/shell.js +++ b/labs/dependency-examples/durandal/js/viewmodels/shell.js @@ -1,20 +1,20 @@ /*global define*/ define([ - 'bower_components/durandal/plugins/router', - 'bower_components/durandal/app' + 'bower_components/durandal/plugins/router', + 'bower_components/durandal/app' ], function (router, app) { - 'use strict'; - - return { - router: router, - search: function () { - //It's really easy to show a message box. - //You can add custom options too. Also, it returns a promise for the user's response. - app.showMessage('Search not yet implemented...'); - }, - activate: function () { - return router.activate('todoapp'); - } - }; + 'use strict'; + + return { + router: router, + search: function () { + //It's really easy to show a message box. + //You can add custom options too. Also, it returns a promise for the user's response. + app.showMessage('Search not yet implemented...'); + }, + activate: function () { + return router.activate('todoapp'); + } + }; }); \ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/viewmodels/todoapp.js b/labs/dependency-examples/durandal/js/viewmodels/todoapp.js index c47b73761f..e23d334d47 100644 --- a/labs/dependency-examples/durandal/js/viewmodels/todoapp.js +++ b/labs/dependency-examples/durandal/js/viewmodels/todoapp.js @@ -1,8 +1,8 @@ define(function () { - 'use strict'; + 'use strict'; - var ViewModel = function () { - }; + var ViewModel = function () { + }; - return ViewModel; + return ViewModel; }); \ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/views/list.html b/labs/dependency-examples/durandal/js/views/list.html index 754052ef2b..dafe0de1f8 100644 --- a/labs/dependency-examples/durandal/js/views/list.html +++ b/labs/dependency-examples/durandal/js/views/list.html @@ -1,36 +1,36 @@
-
- - +
+ +
\ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/views/shell.html b/labs/dependency-examples/durandal/js/views/shell.html index ae6d80dd51..6af7de32ed 100644 --- a/labs/dependency-examples/durandal/js/views/shell.html +++ b/labs/dependency-examples/durandal/js/views/shell.html @@ -1,14 +1,14 @@ 
-
- -
- +
+ +
+
\ No newline at end of file diff --git a/labs/dependency-examples/durandal/js/views/todoapp.html b/labs/dependency-examples/durandal/js/views/todoapp.html index ec219e93bc..acb47ca029 100644 --- a/labs/dependency-examples/durandal/js/views/todoapp.html +++ b/labs/dependency-examples/durandal/js/views/todoapp.html @@ -1,11 +1,11 @@
- -
- -
+ +
+ +
\ No newline at end of file