Remote Resource Todolists Uncommented

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>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://stoodder.github.io/falconjs/scripts/falcon.min.js"></script>
<script src="http://stoodder.github.io/falconjs/scripts/mock_todo_server.js"></script>
<div id="application"></div>

CSS

a {
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#application {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

#layout-sidebar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 175px;
    overflow: auto;
    background-color: #f4f4f4;
}

ul#todolist-list {
    padding: 0px;
    margin: 0px;
    color: #333333;
}

ul#todolist-list li:hover {
    background-color: #e8e8e8;
}

ul#todolist-list li {
    padding: 10px 5px;
    cursor: pointer;
}

ul#todolist-list li.selected {
    background-color: #333333;
    color: #f4f4f4;
}

ul#todolist-list li strong {
    font-size: 14px;
    font-weight: bold;
}

ul#todolist-list li p {
    font-size: 11px;
    font-style: italic;
}

#content-view {
    position: absolute;
    left: 175px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow: auto;
    padding: 10px;
}

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

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

JavaScript

Falcon.baseTemplateUrl = "/template";
Falcon.baseApiUrl = "/api";

var Todo = Falcon.Model.extend({
    url: 'todo.json',
    
    observables: {
        'text': '',
        'is_complete': ''
    }
});

var Todos = Falcon.Collection.extend({
    model: Todo
});

var TodoList = Falcon.Model.extend({
    url: 'todo_list.json',
    
    defaults: {
        'todos': function() { return new Todos( this ); }
    },
    
    observables: {
        'title': '',
        'description': ''
    }
});
var TodoLists = Falcon.Collection.extend({
    model: TodoList 
});

var TodoListView = Falcon.View.extend({
    url: 'todo_list.tmpl',

    defaults: {
        'todo_list': function(todo_list) { return todo_list; }
    },
    
    observables: {
        'new_todo_text': ''
    },
    
    initialize: function(todo_list){},
    
    addTodo: function()
    {
        var todo = new Todo({ text: this.new_todo_text() }, this.todo_list);
        
        this.todo_list.todos.create(todo);
        
        this.new_todo_text('');
    },
    
    removeTodo: function(todo)
    {
        this.todo_list.todos.destroy( todo );
    },
    
    completeTodo: function(todo)
    {
        todo.set('is_complete', true);
        
        todo.save();
    },
    
    editTodoList: function()
    {
        this.trigger("edit", this.todo_list);
    },
    
    deleteTodoList: function()
    {
        this.todo_list.destroy(function(todo_list) {
            this.trigger("delete", todo_list);
        }, this);
    }
});


var NewTodoListView = Falcon.View.extend({
    url: 'todo_list_form.tmpl',
    
    observables: {
        'title': 'Untitled Todo List',
        'description': ''
    },
    
    cancelSave: function()
    {
        this.trigger("cancel");
    },
    
    saveTodoList: function()
    {
        todo_list = new TodoList({
            'title': this.title(),
            'description': this.description()
        });
        
        todo_list.create(function(todo_list) {        
     ...