Basic Todolist

An example of using falcon with a basic, single view, todo list

by stoodder

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://stoodder.github.io/falconjs/scripts/falcon.min.js"></script>
<div id="application"></div>
<template id="todo_list_tmpl">
    <!-- ko if: $view.is_editting_title -->
        <input type="text" data-bind="value: $view.title" />
        <button data-bind="click: $view.saveTitle">Save</button>
    <!-- /ko -->
    <!-- ko ifnot: $view.is_editting_title -->
	    <h3>
            <!-- ko text: $view.title --><!-- /ko -->
	        <a data-bind="click: $view.editTitle">Edit</a>
	    </h3>
    <!-- /ko -->
	<ul class="todo-list" data-bind="foreach: $view.todos">
		<li data-bind="css: {'completed': is_complete}">
			<!-- ko text: text --><!-- /ko -->
			<a data-bind="click: $view.completeTodo">[Complete]</a>
			<a data-bind="click: $view.removeTodo">[X]</a>
		</li>
	</ul>
	<input type="text" data-bind="value: $view.new_todo_text" />
	<button data-bind="click: $view.addTodo">Add</button>
</template>

CSS

a {
    cursor: pointer;
    color: navy;
}

.todo-list {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.todo-list li.completed {
    color: grey;
    text-decoration: line-through;
}

JavaScript

//----------------------------------------------------------------
// Here we're creating a new model to represent an individual Todo
//----------------------------------------------------------------
var Todo = Falcon.Model.extend({
    // The url propery is used to represent a url piece for this model. 
    // This will be used by the model's makeUrl() method to generate a url 
    // to locate this resource on a remote server. The url property isn't 
    // being utilized in this example.  I will go into more depth of how 
    // this works in a later tutorial.
    url: 'todo',
    
    // The 'observables' property defines which members should be defaulted 
    // as observables for each instance of this model.  Read the description 
    // in the comments on TodoListView below for more indepth detail on how 
    // this works.
    observables: {
        'text': '',
        'is_complete': ''
    }
});



//----------------------------------------------------------------
// Here we're creating a 'Todos' collection which is just a list 
// of Todos
//----------------------------------------------------------------
var Todos = Falcon.Collection.extend({
    // The only thing that a collection requires is a model definition 
    // to relate to
    model: Todo
});



//----------------------------------------------------------------
// Here we're creating a view that will be used for displaying and 
// editting a list title and managing a list of todos.  It should 
// be noted that, in Falcon, there's a new binding scope called 
// '$view'. This is similar to knockouts $parent, $root, and $data 
// binding scopes in that it gives a template direct access to a view's 
// member variables and functions from anywhere in the view (regardless 
// of scope).  To understand how this works a bit better, take a look 
// through the template html.
//----------------------------------------------------------------
var TodoListView = Falcon.View.extend({
    
    // This...