Skip to content

T
todomvc
Commit 4116c09d authored by Ryan Niemeyer's avatar Ryan Niemeyer
Browse files
Options

Update Knockout.js sample to use 2.0.0 features.

parent a02ee13c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 11798 deletions
todo-example/knockoutjs/index.html
View file @ 4116c09d
......@@ -3,9 +3,7 @@
<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>
<script src="js/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<div id="todoapp">
......@@ -14,20 +12,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', event: { keyup: 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', event: { keyup: editkeyup, 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 +56,84 @@
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("");
(function() {
//represent a single todo item
var Todo = function (text) {
this.content = ko.observable(text);
this.done = ko.observable(false);
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); },
editkeyup: function(data, event) {
if (event.keyCode === 13) {
this.stopEditing();
}
}
});
},
//our main view model
var ViewModel = function() {
var self = this;
this.todos = ko.observableArray();
this.current = ko.observable();
remove: function (event) {
viewModel.todos.remove(this);
},
//add a new todo, when enter key is pressed
this.add = function (data, event) {
if (event.keyCode === 13) {
var newTodo = new Todo(self.current());
self.todos.push(newTodo);
self.current("");
}
};
removeCompleted: function (event) {
viewModel.todos.removeAll(viewModel.done());
}
};
//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();
});
};
viewModel.remaining = ko.dependentObservable(function () {
return this.todos().filter(function (el) {
return el.done() === false;
});
}, viewModel),
//count of all completed todos
this.completedCount = ko.computed(function () {
return ko.utils.arrayFilter(self.todos(), function(todo) {
return todo.done();
}).length;
});
viewModel.done = ko.dependentObservable(function () {
return this.todos().filter(function (el) {
return el.done() === true;
});
}, viewModel),
//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";
};
};
ko.applyBindings(viewModel);
//bind a new instance of our view model to the page
ko.applyBindings(new ViewModel());
})();
</script>
</body>
</html>
\ No newline at end of file
todo-example/knockoutjs/js/jquery-1.6.1.js deleted 100644 → 0
View file @ a02ee13c
This diff is collapsed.
todo-example/knockoutjs/js/jquery.tmpl.js deleted 100644 → 0
View file @ a02ee13c
This diff is collapsed.
todo-example/knockoutjs/js/knockout-1.2.1.debug.js deleted 100644 → 0
View file @ a02ee13c
This source diff could not be displayed because it is too large. You can view the blob instead.
todo-example/knockoutjs/js/knockout-1.2.1.js deleted 100644 → 0
View file @ a02ee13c
This diff is collapsed.
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