Skip to content

T
todomvc
Commit 9af47940 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #3 from jesseemerick/master 

Updated the KnockOut.Js example
parents 785eba8a ed349aa7
Hide whitespace changes
Inline Side-by-side
Showing with 13 additions and 5 deletions
todo-example/knockoutjs/index.html
View file @ 9af47940
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Knockout.js</title> <title>Knockout.js</title>
...@@ -43,15 +43,15 @@ ...@@ -43,15 +43,15 @@
<a href="http://twitter.com/addyosmani">Addy Osmani</a> <a href="http://twitter.com/addyosmani">Addy Osmani</a>
</div> </div>
<script id="todoitemtemplate" type="text/html"> <script id="todoitemtemplate" type="text/html">
<li> <li data-bind="css: {editing: editing}">
<div data-bind="attr: { class : done() ? 'todo done' : 'todo'}"> <div data-bind="attr: { class : done() ? 'todo done' : 'todo'}">
<div class="display"> <div class="display">
<input class="check" type="checkbox" data-bind="checked: done" /> <input class="check" type="checkbox" data-bind="checked: done" />
<div class="todo-content" data-bind="text: content"></div> <div class="todo-content" data-bind="text: content, click: edit" style="cursor: pointer;"></div>
<span class="todo-destroy" data-bind="click: viewModel.remove"></span> <span class="todo-destroy" data-bind="click: viewModel.remove"></span>
</div> </div>
<div class="edit"> <div class="edit">
<input class="todo-input" type="text" data-bind="value: content"/> <input class="todo-input" type="text" data-bind="value: content, event: { keyup: editkeyup, blur: stopEditing }"/>
</div> </div>
</div> </div>
</li> </li>
...@@ -74,6 +74,14 @@ ...@@ -74,6 +74,14 @@
this.content = ko.observable(text); this.content = ko.observable(text);
this.order = ko.observable(); this.order = ko.observable();
this.done = ko.observable(false); 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 = { var viewModel = {
...@@ -121,4 +129,4 @@ ...@@ -121,4 +129,4 @@
ko.applyBindings(viewModel); ko.applyBindings(viewModel);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
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