Skip to content

T
todomvc
Commit abbe1a7e authored by James Thomas's avatar James Thomas
Browse files
Options

Added 'clear on completed' and tidied up the code a bit...

parent dface8c5
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 70 deletions
todo-example/dojo/css/todos.css
View file @ abbe1a7e
...@@ -454,7 +454,7 @@ body { ...@@ -454,7 +454,7 @@ body {
#todoapp .content ul#todo-list li .todo-destroy { #todoapp .content ul#todo-list li .todo-destroy {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 16px; top: 22px;
display: none; display: none;
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
...@@ -543,8 +543,8 @@ body { ...@@ -543,8 +543,8 @@ body {
top: 1px; top: 1px;
} }
.checkedTodo { /* When checkbox is selected, score through todo item content */
.dijitCheckBoxChecked + .todo-content {
color: #666; color: #666;
text-decoration: line-through; text-decoration: line-through;
} }
todo-example/dojo/index.html
View file @ abbe1a7e
...@@ -7,40 +7,19 @@ ...@@ -7,40 +7,19 @@
@import "/code/dtk/dojotoolkit/dijit/themes/claro/claro.css"; @import "/code/dtk/dojotoolkit/dijit/themes/claro/claro.css";
</style> </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, paths:{'todo':'../../todo'}" src="./js/dtk/dojo/dojo.js"></script>
<script> <script>
require(["dojo/parser", "dojo/dom-class", "dojox/mvc", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output", "dijit/form/CheckBox","dijit/InlineEditBox"], require(["dojo/parser", "dojo/dom-class", "dojo/_base/array", "dojox/mvc", "dojox/mvc/Group",
function (parser, domClass, mvc, Group, Repeat, Output, CheckBox) { "dojox/mvc/Repeat", "dojox/mvc/Output", "dijit/InlineEditBox", "todo/form/CheckBox"],
function (parser, domClass, array, mvc) {
dojo.declare("dijit.form.BoundCheckBox", [CheckBox], {
_setCheckedAttr: function (checked) {
this.inherited(arguments);
this._watchCallbacks("value", !checked, checked);
},
_getValueAttr: function () {
return this.get("checked");
}
});
var data = { var data = {
todos : [ todos : [],
{ content: "First", "isDone" : false },
{ content: "Second", "isDone" : true },
{ content: "Third", "isDone" : false }
],
incomplete: 0, incomplete: 0,
complete: 0 complete: 0
}; };
window.model = mvc.newStatefulModel({ data : data }); window.model = mvc.newStatefulModel({ data : data });
for(var i = 0; s = model.todos[i], i < model.todos.length; i++) {
mvc.bindInputs([s.isDone], function () {
window.updateTotalItemsLeft();
});
}
mvc.bind(model.incomplete, "value", model.complete, "value", function (value) { mvc.bind(model.incomplete, "value", model.complete, "value", function (value) {
return this.model.todos.get("length") - value; return this.model.todos.get("length") - value;
}); });
...@@ -50,18 +29,21 @@ ...@@ -50,18 +29,21 @@
}); });
mvc.bindInputs([model.complete], function () { mvc.bindInputs([model.complete], function () {
domClass[model.complete.get("value") > 0 ? "add" : "remove" ]("todo-stats", "items_selected"); domClass[model.complete.value > 0 ? "add" : "remove" ]("todo-stats", "items_selected");
}); });
window.updateTotalItemsLeft = function () {
for(var i = 0, left = 0; s = model.todos[i], i < model.todos.length; i++) { var updateTotalItemsLeft = function () {
if (!s.isDone.get("value")) { var remaining = 0;
left++;
} array.forEach(model.todos, function (item) {
} item && !item.isDone.value && remaining++;
model.incomplete.set("value", left); });
model.incomplete.set("value", remaining);
}; };
model.todos.watch(updateTotalItemsLeft);
var addToModel = function (content, isDone) { var addToModel = function (content, isDone) {
var insert = mvc.newStatefulModel({ var insert = mvc.newStatefulModel({
...@@ -70,7 +52,6 @@ ...@@ -70,7 +52,6 @@
mvc.bindInputs([insert.isDone], updateTotalItemsLeft); mvc.bindInputs([insert.isDone], updateTotalItemsLeft);
model.todos.add(model.todos.length, insert); model.todos.add(model.todos.length, insert);
updateTotalItemsLeft();
} }
window.addTodoItem = function (input, event) { window.addTodoItem = function (input, event) {
...@@ -79,28 +60,21 @@ ...@@ -79,28 +60,21 @@
addToModel(input.value, false); addToModel(input.value, false);
input.value = ""; input.value = "";
} };
window.removeFromModel = function (id) { window.removeCompletedItems = function () {
model.todos.remove(id); var len = model.todos.length, idx = 0;
window.updateTotalItemsLeft();
}
window.handleCheckBoxChange = function (current) { while (idx < len) {
console.log('handleCheckBoxChange value changed current ='+current+" this.index="+this.index); if (model.todos[idx].isDone.value) {
// if(this.binding){ model.todos.remove(idx);
// this.binding.set("value",current); len--;
// } continue;
if(this.index){ }
if(current){
dojo.addClass("todo"+this.index, 'checkedTodo');
}else{
dojo.removeClass("todo"+this.index, 'checkedTodo');
}
}
}
idx++;
};
};
}); });
</script> </script>
</head> </head>
...@@ -126,13 +100,13 @@ ...@@ -126,13 +100,13 @@
<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">
<input class="check" data-dojo-type="dijit.form.BoundCheckBox" index="${this.index}" id="isdone${this.index}" data-dojo-props='ref: "isDone"' style="display:inline-block" > <input class="check" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "isDone"' style="display:inline-block" >
</input> </input>
<div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox" id="todo${this.index}" <div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox"
data-dojo-props='ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></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 class="todo-destroy" data-model-id="${this.index}" onclick="model.todos.remove(this.dataset.modelId)">
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -144,20 +118,14 @@ ...@@ -144,20 +118,14 @@
<span class="word">items</span> left. <span class="word">items</span> left.
</span> </span>
<span class="todo-clear"> <span class="todo-clear">
<a href="#"> <a href="#" onclick="removeCompletedItems()">
Clear Clear
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model.complete"></span> <span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model.complete" ></span>
completed items completed items
</a> </a>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
......
todo-example/dojo/js/todo/form/CheckBox.js 0 → 100644
View file @ abbe1a7e
define(["dojo/_base/declare", "dijit/form/CheckBox"], function (declare, CheckBox) {
return declare("todo.form.CheckBox", [CheckBox], {
_setCheckedAttr: function (checked) {
this.inherited(arguments);
this._watchCallbacks("value", !checked, checked);
},
_getValueAttr: function () {
return this.get("checked");
}
});
});
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