Skip to content

T
todomvc
Commit 0ec40115 authored by Ed Chatelain's avatar Ed Chatelain
Browse files
Options

My updates to handle the checkbox and to use dijit/InlineEditBox for the todo item.

parent d2bd1129
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 12 deletions
todo-example/dojo/css/todos.css
View file @ 0ec40115
...@@ -530,3 +530,8 @@ body { ...@@ -530,3 +530,8 @@ body {
top: 1px; top: 1px;
} }
.checkedTodo {
color: #666;
text-decoration: line-through;
}
todo-example/dojo/index.html
View file @ 0ec40115
...@@ -3,15 +3,20 @@ ...@@ -3,15 +3,20 @@
<head> <head>
<title>Dojo</title> <title>Dojo</title>
<style type="text/css">
@import "../../../../../fulldojo1.7Clean3/dijit/themes/claro/claro.css";
@import "../../../../../fulldojo1.7Clean3/dijit/themes/claro/document.css";
</style>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script data-dojo-config="async:true, parseOnLoad:true" src="/code/dtk/dojotoolkit/dojo/dojo.js"></script> <script data-dojo-config="async:true, parseOnLoad:true" src="/code/dtk/dojotoolkit/dojo/dojo.js"></script>
<script> <script>
require(["dojo/parser", "dojox/mvc", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output"], function (parser, mvc) { require(["dojo/parser", "dojox/mvc", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output","dijit/form/CheckBox","dijit/InlineEditBox"],
function (parser, mvc) {
var data = { var data = {
todos : [ todos : [
{ content: "First" }, { content: "First", "isDone" : false },
{ content: "Second" }, { content: "Second", "isDone" : true },
{ content: "Third" } { content: "Third", "isDone" : false }
], ],
}; };
...@@ -21,7 +26,7 @@ ...@@ -21,7 +26,7 @@
if (event.keyCode !== 13) return; if (event.keyCode !== 13) return;
var insert = mvc.newStatefulModel({ "data" : { var insert = mvc.newStatefulModel({ "data" : {
content: input.value content: input.value, isDone: false
} }); } });
model.todos.add(model.todos.length, insert); model.todos.add(model.todos.length, insert);
input.value = ""; input.value = "";
...@@ -31,12 +36,27 @@ ...@@ -31,12 +36,27 @@
console.log(id); console.log(id);
model.todos.remove(id); model.todos.remove(id);
} }
window.handleCheckBoxChange = function (current) {
console.log('handleCheckBoxChange value changed current ='+current+" this.index="+this.index);
if(this.binding){
this.binding.set("value",current);
}
if(this.index){
if(current){
dojo.addClass("todo"+this.index, 'checkedTodo');
}else{
dojo.removeClass("todo"+this.index, 'checkedTodo');
}
}
}
}); });
</script> </script>
</head> </head>
<body> <body class="claro">
<!-- Todo App Interface --> <!-- Todo App Interface -->
...@@ -57,11 +77,12 @@ ...@@ -57,11 +77,12 @@
<ul id="todo-list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'model.todos'"> <ul id="todo-list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'model.todos'">
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'"> <li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
<div class="todo"> <div class="todo">
<div class="display"> <input class="check" data-dojo-type="dijit.form.CheckBox" index="${this.index}" id="isdone${this.index}" data-dojo-props='ref: "isDone", onChange: handleCheckBoxChange' style="display:inline-block" ></input>
<input class="check" type="checkbox" /> <div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox" id="todo${this.index}"
<div data-dojo-type="dojox.mvc.Output" data-dojo-props="ref:'content'" class="todo-content"></div> data-dojo-props='ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div>
<span class="todo-destroy" data-model-id="${this.index}" onclick="removeFromModel(this.dataset.modelId)">
</span> <span class="todo-destroy" data-model-id="${this.index}" onclick="removeFromModel(this.dataset.modelId)">
</span>
</div> </div>
</li> </li>
</ul> </ul>
......
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