Skip to content

T
todomvc
Commit 79ceec9c authored by Aaron Boushley's avatar Aaron Boushley
Browse files
Options

Merge pull request #48 from rniemeyer/master 

Update Knockout.js sample to use features from 2.0.0
parents c184e41b fb3a233b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2219 additions and 10077 deletions
todo-example/knockoutjs/index.html
View file @ 79ceec9c
......@@ -3,9 +3,6 @@
<head>
<title>Knockout.js</title>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script>
<script src="js/knockout-1.2.1.js" type="text/javascript"></script>
</head>
<body>
<div id="todoapp">
......@@ -14,20 +11,41 @@
</div>
<div class="content">
<div id="create-todo">
<input id="new-todo" data-bind="value: current, event: { keyup: add}" placeholder="What needs to be done?"
type="text" />
<input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" />
<span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span>
</div>
<div id="todos">
<ul id="todo-list" data-bind="template: { name: 'todoitemtemplate', foreach: todos }">
<ul id="todo-list" data-bind="foreach: todos">
<li data-bind="css: { editing: editing }">
<div class="todo" data-bind="css: { done : done }">
<div class="display">
<input class="check" type="checkbox" data-bind="checked: done" />
<div class="todo-content" data-bind="text: content, event: { dblclick: edit }" style="cursor: pointer;"></div>
<span class="todo-destroy" data-bind="click: $root.remove"></span>
</div>
<div class="edit">
<input class="todo-input" data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: stopEditing, event: { blur: stopEditing }"/>
</div>
</div>
</li>
</ul>
</div>
<div id="todo-stats" data-bind="template: { name: 'statstemplate'}">
<div id="todo-stats">
<span class="todo-count" data-bind="visible: remainingCount">
<span class="number" data-bind="text: remainingCount"></span>
<span class="word" data-bind="text: getLabel(remainingCount)"></span> left.
</span>
<span class="todo-clear" data-bind="visible: completedCount">
<a href="#" data-bind="click: removeCompleted">
Clear <span class="number-done" data-bind="text: completedCount"></span>
completed <span class="word-done" data-bind="text: getLabel(completedCount)"></span>
</a>
</span>
</div>
</div>
</div>
<ul id="instructions">
<li>Double-click to edit a todo.</li>
<li data-bind="visible: todos().length">Double-click to edit a todo.</li>
</ul>
<div id="credits">
Created by
......@@ -37,96 +55,23 @@
Modified to use knockout.js by
<br />
<a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a>
<br />
Patches/fixes for cross-browser compat:
<br/>
Updated to use knockout.js 2.0 by
<br/>
<a href="http://knockmeout.net">Ryan Niemeyer</a>
<br />
Patches/fixes for cross-browser compat:
<br />
<a href="http://twitter.com/addyosmani">Addy Osmani</a>
</div>
<script id="todoitemtemplate" type="text/html">
<li data-bind="css: {editing: editing}">
<div data-bind="attr: { class : done() ? 'todo done' : 'todo'}">
<div class="display">
<input class="check" type="checkbox" data-bind="checked: done" />
<div class="todo-content" data-bind="text: content, click: edit" style="cursor: pointer;"></div>
<span class="todo-destroy" data-bind="click: viewModel.remove"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" data-bind="value: content, event: { keyup: editkeyup, blur: stopEditing }"/>
</div>
</div>
</li>
</script>
<script id="statstemplate" type="text/html">
<span class="todo-count" data-bind="visible: remaining().length > 0">
<span class="number" data-bind="text: remaining().length"></span>
<span class="word" data-bind="text: remaining().length == 1 ? 'item' : 'items'"></span> left.
</span>
<span class="todo-clear" data-bind="visible: done().length > 0">
<a href="#" data-bind="click: removeCompleted">
Clear <span class="number-done" data-bind="text: done().length"></span>
completed <span class="word-done"data-bind="text: done().length == 1 ? 'item' : 'items'"></span>
</a>
</span>
</script>
<script type="text/javascript">
var Todo = function (text) {
this.content = ko.observable(text);
this.order = ko.observable();
this.done = ko.observable(false);
this.editing = ko.observable(false);
this.edit = function() { this.editing(true); };
this.stopEditing = function() { this.editing(false); };
this.editkeyup = function(event) {
if (event.keyCode === 13) {
this.stopEditing();
}
};
}
var viewModel = {
todos: ko.observableArray(),
current: ko.observable(),
add: function (event) {
if (event.keyCode === 13) {
var todoContent = "";
/*includes fix for Opera*/
(viewModel.current() == undefined) ? todoContent = $('#new-todo').val() : todoContent = viewModel.current();
var newTodo = new Todo(todoContent);
this.todos.push(newTodo);
this.current("");
}
},
remove: function (event) {
viewModel.todos.remove(this);
},
removeCompleted: function (event) {
viewModel.todos.removeAll(viewModel.done());
}
};
viewModel.remaining = ko.dependentObservable(function () {
return this.todos().filter(function (el) {
return el.done() === false;
});
}, viewModel),
viewModel.done = ko.dependentObservable(function () {
return this.todos().filter(function (el) {
return el.done() === true;
});
}, viewModel),
ko.applyBindings(viewModel);
</script>
<!-- Knockout has no direct dependencies -->
<script src="js/knockout-2.0.0.js" type="text/javascript"></script>
<!-- needed to support JSON.stringify in older browsers (for local storage) -->
<script src="js/json2.js" type="text/javascript"></script>
<!-- used for local storage -->
<script src="js/amplify.store.min.js" type="text/javascript"></script>
<!-- our app code -->
<script src="js/todos.js" type="text/javascript"></script>
</body>
</html>
\ No newline at end of file
todo-example/knockoutjs/js/amplify.store.min.js 0 → 100644
View file @ 79ceec9c
/*!
* Amplify Store - Persistent Client-Side Storage 1.1.0
*
* Copyright 2011 appendTo LLC. (http://appendto.com/team)
* Dual licensed under the MIT or GPL licenses.
* http://appendto.com/open-source-licenses
*
* http://amplifyjs.com
*/
(function(a,b){function e(a,e){c.addType(a,function(f,g,h){var i,j,k,l,m=g,n=(new Date).getTime();if(!f){m={},l=[],k=0;try{f=e.length;while(f=e.key(k++))d.test(f)&&(j=JSON.parse(e.getItem(f)),j.expires&&j.expires<=n?l.push(f):m[f.replace(d,"")]=j.data);while(f=l.pop())e.removeItem(f)}catch(o){}return m}f="__amplify__"+f;if(g===b){i=e.getItem(f),j=i?JSON.parse(i):{expires:-1};if(j.expires&&j.expires<=n)e.removeItem(f);else return j.data}else if(g===null)e.removeItem(f);else{j=JSON.stringify({data:g,expires:h.expires?n+h.expires:null});try{e.setItem(f,j)}catch(o){c[a]();try{e.setItem(f,j)}catch(o){throw c.error()}}}return m})}var c=a.store=function(a,b,d,e){var e=c.type;d&&d.type&&d.type in c.types&&(e=d.type);return c.types[e](a,b,d||{})};c.types={},c.type=null,c.addType=function(a,b){c.type||(c.type=a),c.types[a]=b,c[a]=function(b,d,e){e=e||{},e.type=a;return c(b,d,e)}},c.error=function(){return"amplify.store quota exceeded"};var d=/^__amplify__/;for(var f in{localStorage:1,sessionStorage:1})try{window[f].getItem&&e(f,window[f])}catch(g){}if(window.globalStorage)try{e("globalStorage",window.globalStorage[window.location.hostname]),c.type==="sessionStorage"&&(c.type="globalStorage")}catch(g){}(function(){if(!c.types.localStorage){var a=document.createElement("div"),d="amplify";a.style.display="none",document.getElementsByTagName("head")[0].appendChild(a);try{a.addBehavior("#default#userdata"),a.load(d)}catch(e){a.parentNode.removeChild(a);return}c.addType("userData",function(e,f,g){a.load(d);var h,i,j,k,l,m=f,n=(new Date).getTime();if(!e){m={},l=[],k=0;while(h=a.XMLDocument.documentElement.attributes[k++])i=JSON.parse(h.value),i.expires&&i.expires<=n?l.push(h.name):m[h.name]=i.data;while(e=l.pop())a.removeAttribute(e);a.save(d);return m}e=e.replace(/[^-._0-9A-Za-z\xb7\xc0-\xd6\xd8-\xf6\xf8-\u037d\u37f-\u1fff\u200c-\u200d\u203f\u2040\u2070-\u218f]/g,"-");if(f===b){h=a.getAttribute(e),i=h?JSON.parse(h):{expires:-1};if(i.expires&&i.expires<=n)a.removeAttribute(e);else return i.data}else f===null?a.removeAttribute(e):(j=a.getAttribute(e),i=JSON.stringify({data:f,expires:g.expires?n+g.expires:null}),a.setAttribute(e,i));try{a.save(d)}catch(o){j===null?a.removeAttribute(e):a.setAttribute(e,j),c.userData();try{a.setAttribute(e,i),a.save(d)}catch(o){j===null?a.removeAttribute(e):a.setAttribute(e,j);throw c.error()}}return m})}})(),function(){function e(a){return a===b?b:JSON.parse(JSON.stringify(a))}var a={},d={};c.addType("memory",function(c,f,g){if(!c)return e(a);if(f===b)return e(a[c]);d[c]&&(clearTimeout(d[c]),delete d[c]);if(f===null){delete a[c];return null}a[c]=f,g.expires&&(d[c]=setTimeout(function(){delete a[c],delete d[c]},g.expires));return f})}()})(this.amplify=this.amplify||{})
\ No newline at end of file
todo-example/knockoutjs/js/jquery-1.6.1.js deleted 100644 → 0
View file @ c184e41b
This diff is collapsed.
todo-example/knockoutjs/js/jquery.tmpl.js deleted 100644 → 0
View file @ c184e41b
This diff is collapsed.
todo-example/knockoutjs/js/json2.js 0 → 100644
View file @ 79ceec9c
This diff is collapsed.
todo-example/knockoutjs/js/knockout-1.2.1.js deleted 100644 → 0
View file @ c184e41b
This diff is collapsed.
todo-example/knockoutjs/js/knockout-2.0.0.js 0 → 100644
View file @ 79ceec9c
This diff is collapsed.
todo-example/knockoutjs/js/todos.js 0 → 100644
View file @ 79ceec9c
(function() {
//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;
//wrap the handler with a check for the enter key
wrappedHandler = function(data, event) {
if (event.keyCode === 13) {
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 };
};
//call the real event binding's init function
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data);
}
};
//represent a single todo item
var Todo = function (content, done) {
this.content = ko.observable(content);
this.done = ko.observable(done);
this.editing = ko.observable(false);
};
//can place methods on prototype, as there can be many todos
ko.utils.extend(Todo.prototype, {
edit: function() { this.editing(true); },
stopEditing: function() { this.editing(false); }
});
//our main view model
var ViewModel = function(todos) {
var self = this;
//map array of passed in todos to an observableArray of Todo objects
this.todos = ko.observableArray(ko.utils.arrayMap(todos, function(todo) {
return new Todo(todo.content, todo.done);
}));
//store the new todo value being entered
this.current = ko.observable();
//add a new todo, when enter key is pressed
this.add = function (data, event) {
var newTodo = new Todo(self.current());
self.todos.push(newTodo);
self.current("");
};
//remove a single todo
this.remove = function (todo) {
self.todos.remove(todo);
};
//remove all completed todos
this.removeCompleted = function () {
self.todos.remove(function(todo) {
return todo.done();
});
};
//count of all completed todos
this.completedCount = ko.computed(function () {
return ko.utils.arrayFilter(self.todos(), function(todo) {
return todo.done();
}).length;
});
//count of todos that are not complete
this.remainingCount = ko.computed(function () {
return self.todos().length - self.completedCount();
});
//helper function to keep expressions out of markup
this.getLabel = function(count) {
return ko.utils.unwrapObservable(count) === 1 ? "item" : "items";
};
//computed observable that fires whenever anything changes in our todos
this.isDirty = ko.computed(function() {
//get a clean copy of the todos, which also creates a dependency on the observableArray and all observables in each item
var todos = ko.toJS(self.todos);
//store to local storage
amplify.store("todos-knockout", todos);
}).extend({ throttle: 1000 }); //save at most once per second
};
//check local storage for todos
var todos = amplify.store("todos-knockout");
//bind a new instance of our view model to the page
ko.applyBindings(new ViewModel(todos || []));
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7