Step-by-step JayStorm: Step 4 - change filtering

Select filtering for incomplete items

by JayData

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaystorm-1.0.0.js"></script>
<script src="http://include.jaydata.org/handlebars-adapter-0.9.0.js"></script>
<h3>Add new Todo<h3>
<form>
    <div>Task:</div>
    <input name="task" type="text"/><br />
    <input type="submit" value="Add Todo" />
    <span style="display:none" id="loading-indicator">Loading...</span>
</form>

<script id="TodoItem" type="x-handlebars-template">
     <li class="todo-item" data-item="todo">
        <div>
            <input data-complete-id={{id}} type="checkbox" {{#if Completed}}checked{{/if}} />
            <span>{{Task}}</span>
        </div>
    </li>
 </script>

    
<h3>Todo Items</h3>
<ul id="todo-list"></ul>

<h3>
<input data-filter type="checkbox" checked /> Show completed items too
</h3>

CSS

body {
    font-family: 'Calibri';
}

ul { margin-left: 15px; }

h3 {
    margin-top:15px;
    font-weight:bold;
}

input[type=submit] {width:80px;height:25px}
input[type=text] {width:280px;height:25px}

form { margin-left:15px; margin-top:15px}

JavaScript

var apiKey = {
    ownerId: "a0f577b9-8b98-4685-af6d-98943da6448f",
    appId: "9fe72773-3e38-4c4d-af21-6716ec70876c",
    serviceName: "mydatabase"
};

$data.initService(apiKey).then(function(mydatabase) {

    var todoItems = mydatabase.TodoItems;
    todoItems.order("CreationDate").renderTo("#todo-list");
    
    var showAll = true;
    
    function displayTodoItems() {
        todoItems
            .filter("showAll || it.Completed == false", {showAll: showAll})
            .renderTo("#todo-list");         
    }
    
    displayTodoItems();
    
    $(document).delegate("[data-filter]", "click", function() {
        showAll = this.checked;
        displayTodoItems();
    });
    
    $(document).delegate("form", "submit", function() {
        var form = this;
        var todo = todoItems.add({
            Task: form.task.value
        });

        function showNewItem() {
            todo.renderTo("#todo-list");
            form.reset();
        }

        todoItems.saveChanges().then(showNewItem).then(function() {
            $('#loading-indicator').hide();
        });

        $('#loading-indicator').show();
        return false;

    });
    
    $(document).delegate("[data-complete-id]","click", function() {
        var todoId = $(this).data("complete-id"), 
            self = this;
        
        var item = todoItems.update({id: todoId}, {Completed: self.checked });
        todoItems.saveChanges().then(function() {
            $('#loading-indicator').hide(); 
            //always use the entity to refresh the UI.
            //server might have rejected the complete state
            self.checked = item.Completed;
        });
        $('#loading-indicator').show();
        return false;
    });


});