Remote Resource Todolists

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

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/assets/scripts/falcon.min.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

// Setup mock data storages. This is only being used for example purposes 
// to demonstrate how one would got about loading up templates and server 
// data from a remote source using ajax calls. For parts of this example, 
// we're using sinon.js to intercept and respond to ajax requests and we're
// using the javascript storage objects below simply as our 'mock' server data.

// Template Data Storage, These are the same templates from the previous 
// example except stored remotely
var TEMPLATES = {
  "todo_list.tmpl": "" +
      "<!-- ko with: todo_list -->" +
          "<h3>" +
              "<!-- ko text: title --><!-- /ko -->" +
              "<a data-bind=\"click: $view.editTodoList\">Edit</a>" +
              "<a data-bind=\"click: $view.deleteTodoList\">Delete</a>" +
          "</h3>" +
          "<p data-bind=\"text: description\"></p>" +
          "<ul class=\"todo-list\" data-bind=\"foreach: 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>" +
      "<!-- /ko -->",

  "todo_list_form.tmpl": "" +
      "<form class=\"form-horizontal\" data-bind=\"submit: $view.saveTodoList\">" +
          "<div class=\"control-group\">" +
              "<label class=\"control-label\">Title</label>" +
              "<div class=\"controls\">" +
                  "<input type=\"text\" class=\"input-large\" data-bind=\"value: $view.title\" />" +
              "</div>" +
          "</div>" +
          "<div class=\"control-group\">" +
              "<label class=\"control-label\">Description</label>" +
              "<div class=\"controls\">" +
       ...