Scribd
Upload
11 views

5Tutorial

Uploaded by

alternativojovas
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

5Tutorial

Uploaded by

alternativojovas
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

-- ------------------------VIEW------------------------ -->
<h3>Tarefas</h3>

<form data-bind="submit: addTask">


Adicionar tarefa: <input data-bind="value: newTaskText" placeholder="O que
precisa ser feito?" />
<button type="submit">Adicionar</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">


<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
<a href="#" data-bind="click: $parent.removeTask">Excluir</a>
</li>
</ul>

Você tem <b data-bind="text: incompleteTasks().length">&nbsp;</b> tarefa(s)


incompleta(s)
<span data-bind="visible: incompleteTasks().length == 0"> - É hora de
comemorar!</span>

<button data-bind="click: save">Salvar</button>

/*------------------------VIEW MODEL------------------------*/
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
// Dados
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) { return !
task.isDone() && !task._destroy });
});

// Operações
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.destroy(task) };
self.save = function() {
$.ajax("/tasks", {
data: ko.toJSON({ tasks: self.tasks }),
type: "post", contentType: "application/json",
success: function(result) { alert(result) }
});
};

// Carrega o estado inicial do servidor, converte-o em instâncias de Task e, em


seguida, popula self.tasks
$.getJSON("/tasks", function(allData) {
var mappedTasks = $.map(allData, function(item) { return new Task(item) });
self.tasks(mappedTasks);
});
}

ko.applyBindings(new TaskListViewModel());

You might also like