Boas, tou aqui às voltas com um pequeno desafio lúdico e não consigo resolver. Tenciono pôr o botão new a funcionar para adicionar uma nova tarefa em vez da tecla enter no seguinte código:
Código (HTML):
A questão mais exatmanete é porque é que fazendo isto
Código (HTML):
e retirando a parte event:{ keyup: addTask } na linha do input.
Also, gostaria também de editar isto de maneira a que quando a checkbox estivesse check o texto não ficasse editável.
A quem me pudesse ajudar ficaria muito agradecido
PS: aNum dado momento do código da pre-vizualização o codigo aparece a verde não sei porquê. Será por misturar Html com javascript? nesse caso como misturo os dois no mesmo post? ty
Código (HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./application.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" language="javascript" src="./jquery-1.6.1.js"></script>
<script type="text/javascript" language="javascript" src="./jquery.tmpl.js"></script>
<script type="text/javascript" language="javascript" src="./knockout-1.2.1.debug.js"></script>
<script type="text/javascript" language="javascript" src="./json2.js"></script>
<script type="text/html" id="tasksTemplate">
{{each(i, task) tasks()}}
<div class="item" data-bind="css: { done: isDone, editing: isBeingEdited }">
<div class="view" data-bind="event: { dblclick: function(event){ allowEdit(event, task); } } " title="Double click to edit...">
<input type="checkbox" data-bind="checked: isDone">
${ name }
<a class="destroy" data-bind="click: function(){ tasks.remove( task); } "></a>
</div>
<div class="edit">
<input type="text" data-bind="value: name, event: { blur: function(event){ endEdit(event,task); } }">
</div>
</div>
{{/each}}
</script>
</head>
<body>
<div id="views">
<div id="tasks">
<h1>Todo List</h1>
<p>
<p class="stats">
Number of tasks: <span data-bind="text: numTasks()"> </span> (pending <span data-bind="text: openTasks()"> </span> <span data-bind="text: doneTasks()"> </span> complete)
</p>
<p class="button-list">
<button onclick="/*IDK*/">New</button>
<button class="button-clear" data-bind= "event: {click: clearCompleted}" > Clear completed</button>
</p>
<input data-bind="value: taskName, event:{ keyup: addTask }" type="text" placeholder="What needs to be done?"/>
</p>
<div class="tasks" data-bind="template: 'tasksTemplate'" ></div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(function(){
var todosAddress = "todos";
var isBinded = false;
var task = function(name, isDone){
this.name = new ko.observable(name);
this.isDone = new ko.observable(isDone);
this.isBeingEdited = new ko.observable(false);
};
var viewModel = {
tasks: new ko.observableArray(new Array()),
taskName: new ko.observable(""),
};
viewModel.saveTasks = function(value){
};
viewModel.load = function(){
var persistedTasks = new Array();
for(var idx = 0 ; idx < persistedTasks.length; idx++)
{
viewModel.tasks.push( new task( persistedTasks[idx]['name'], persistedTasks[idx]['isDone'] ) );
}
};
viewModel.openTasks = new ko.dependentObservable(function() {
var numTasks = this.tasks().length;
var allTasks = this.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) numTasks --;
}
viewModel.saveTasks(allTasks);
return numTasks;
}, viewModel);
viewModel.numTasks = new ko.dependentObservable(function() {
var numTasks = this.tasks().length;
return numTasks;
}, viewModel);
viewModel.doneTasks = new ko.dependentObservable(function() {
var numTasks = 0;
var allTasks = this.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) numTasks ++;
}
return numTasks;
}, viewModel);
viewModel.addTask = function(event){
if(event.keyCode == '13'){
var taskName = viewModel.taskName();
viewModel.tasks.push( new task( taskName, false) );
viewModel.taskName("");
}
};
viewModel.allowEdit = function(event, theTask){
theTask.isBeingEdited(false);
};
viewModel.endEdit = function(event, theTask){
theTask.isBeingEdited(false);
};
viewModel.clearCompleted = new ko.dependentObservable(
{
owner: viewModel,
read: function(){},
write: function(value){
if( isBinded ){
var removeStack = new Array();
var allTasks = viewModel.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) removeStack.push( theTask );
}
for(var taskIdx=0; taskIdx < removeStack.length; taskIdx++ ){
viewModel.tasks.remove( removeStack[taskIdx] );
}
}
}
});
viewModel.load();
ko.applyBindings(viewModel);
isBinded = true;
});
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="./application.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" language="javascript" src="./jquery-1.6.1.js"></script>
<script type="text/javascript" language="javascript" src="./jquery.tmpl.js"></script>
<script type="text/javascript" language="javascript" src="./knockout-1.2.1.debug.js"></script>
<script type="text/javascript" language="javascript" src="./json2.js"></script>
<script type="text/html" id="tasksTemplate">
{{each(i, task) tasks()}}
<div class="item" data-bind="css: { done: isDone, editing: isBeingEdited }">
<div class="view" data-bind="event: { dblclick: function(event){ allowEdit(event, task); } } " title="Double click to edit...">
<input type="checkbox" data-bind="checked: isDone">
${ name }
<a class="destroy" data-bind="click: function(){ tasks.remove( task); } "></a>
</div>
<div class="edit">
<input type="text" data-bind="value: name, event: { blur: function(event){ endEdit(event,task); } }">
</div>
</div>
{{/each}}
</script>
</head>
<body>
<div id="views">
<div id="tasks">
<h1>Todo List</h1>
<p>
<p class="stats">
Number of tasks: <span data-bind="text: numTasks()"> </span> (pending <span data-bind="text: openTasks()"> </span> <span data-bind="text: doneTasks()"> </span> complete)
</p>
<p class="button-list">
<button onclick="/*IDK*/">New</button>
<button class="button-clear" data-bind= "event: {click: clearCompleted}" > Clear completed</button>
</p>
<input data-bind="value: taskName, event:{ keyup: addTask }" type="text" placeholder="What needs to be done?"/>
</p>
<div class="tasks" data-bind="template: 'tasksTemplate'" ></div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(function(){
var todosAddress = "todos";
var isBinded = false;
var task = function(name, isDone){
this.name = new ko.observable(name);
this.isDone = new ko.observable(isDone);
this.isBeingEdited = new ko.observable(false);
};
var viewModel = {
tasks: new ko.observableArray(new Array()),
taskName: new ko.observable(""),
};
viewModel.saveTasks = function(value){
};
viewModel.load = function(){
var persistedTasks = new Array();
for(var idx = 0 ; idx < persistedTasks.length; idx++)
{
viewModel.tasks.push( new task( persistedTasks[idx]['name'], persistedTasks[idx]['isDone'] ) );
}
};
viewModel.openTasks = new ko.dependentObservable(function() {
var numTasks = this.tasks().length;
var allTasks = this.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) numTasks --;
}
viewModel.saveTasks(allTasks);
return numTasks;
}, viewModel);
viewModel.numTasks = new ko.dependentObservable(function() {
var numTasks = this.tasks().length;
return numTasks;
}, viewModel);
viewModel.doneTasks = new ko.dependentObservable(function() {
var numTasks = 0;
var allTasks = this.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) numTasks ++;
}
return numTasks;
}, viewModel);
viewModel.addTask = function(event){
if(event.keyCode == '13'){
var taskName = viewModel.taskName();
viewModel.tasks.push( new task( taskName, false) );
viewModel.taskName("");
}
};
viewModel.allowEdit = function(event, theTask){
theTask.isBeingEdited(false);
};
viewModel.endEdit = function(event, theTask){
theTask.isBeingEdited(false);
};
viewModel.clearCompleted = new ko.dependentObservable(
{
owner: viewModel,
read: function(){},
write: function(value){
if( isBinded ){
var removeStack = new Array();
var allTasks = viewModel.tasks();
for(var taskIdx=0; taskIdx < allTasks.length; taskIdx++ ){
var theTask = allTasks[taskIdx];
if( theTask.isDone() ) removeStack.push( theTask );
}
for(var taskIdx=0; taskIdx < removeStack.length; taskIdx++ ){
viewModel.tasks.remove( removeStack[taskIdx] );
}
}
}
});
viewModel.load();
ko.applyBindings(viewModel);
isBinded = true;
});
</script>
</body>
</html>
A questão mais exatmanete é porque é que fazendo isto
Código (HTML):
<button class="newtask" data-bind= "value: taskName event: {click: addTask}" > Clear completed</button>
e retirando a parte event:{ keyup: addTask } na linha do input.
Also, gostaria também de editar isto de maneira a que quando a checkbox estivesse check o texto não ficasse editável.
A quem me pudesse ajudar ficaria muito agradecido
PS: aNum dado momento do código da pre-vizualização o codigo aparece a verde não sei porquê. Será por misturar Html com javascript? nesse caso como misturo os dois no mesmo post? ty