Scribd
Upload
13 views2 pages

5 Tutorial

Uploaded by

alternativojovas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views2 pages

5 Tutorial

Uploaded by

alternativojovas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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