JayStorm TodoExample Step5

Enable filtering of items based on completed state and substring in the task

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/handlebars-adapter.js"></script>
<script src="http://include.jaydata.org/jayStorm.js"></script>
<body>
     <script id="TodoItem" type="x-handlebars-template">
         <li class="todo-item" data-item-id={{id}}>
            <div>
                <input data-complete-todo="{{id}}" type="checkbox" {{#if Completed}}checked="checked"{{/if}}/>
                <span>{{Task}}</span>
            </div>
        </li>
     </script>
    
    <h3>Change completed state with the checkboxes</h3>
    <ul id="todoList"></ul>
    
    <h3>Change filter</h3>
    <form>
        <input type="checkbox" name="showCompleted" 
            checked data-filter-completed/> Show completed <br />
        Filter: <input type="text" class="search" data-filter-task />
    </form>
    
    <h3>Add new Todo<h3>
    <form id="addNewItem">
        <div>Task:</div>
        <input name="task" type="text"/><br />
        <div>Completed:</div>
        <input name="completed" type="checkbox" /><br />
        <input type="submit" value="Add Todo" />
    </form>
        
    <div id="networkMessage"></div>
</body>

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}

.search { width:150px !important}

JavaScript

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

$data.service(apiKey, function(db) {
    mydatabase = db;
    listTodoItems();
});

var showCompleted = true;
var taskSearch = '';
function listTodoItems() {
    
    var filterString = "(showCompleted == true || it.Completed == false) && \
                        (taskSearch == '' || it.Task.contains(taskSearch))";
    itemCache = {};
    showLoading();
    mydatabase
        .TodoItems
        .filter(filterString, { taskSearch : taskSearch, showCompleted: showCompleted})
        .toArray(function(items) {
             $('#todoList').empty();    
            items.forEach(function(item) {
                itemCache[item.id] = item;
                item.renderTo("#todoList");
            });
            hideLoading();
        });
}
$(document).delegate("[data-filter-task]", "keyup", function() {
  taskSearch = this.value;
  listTodoItems();
})
        
$(document).delegate("[data-filter-completed]", "click", function() {
  showCompleted = this.checked;
  listTodoItems();
})
    
$('#addNewItem').submit(function() {
    var todo = mydatabase.TodoItems.add({
        Task: this["task"].value,
        Completed: this["completed"].checked
    }), self = this;
    
    function showNewItem() {
        todo.renderTo("#todoList");
        hideLoading();
        self.reset();
    }
    mydatabase.saveChanges().then(showNewItem);
    showLoading();
    return false;
});


var itemCache;



$(document).delegate("[data-complete-todo]", "click", function() {
    var item = itemCache[$(this).data("complete-todo")],
        completed = this.checked,
        self = this;

    mydatabase.attach(item);
    item.Completed = completed;
    mydatabase.saveChanges().then(changeCheckboxState);

    function changeCheckboxState() {
        self.checked = completed;
        hideLoading();
    }
    showLoading();
    return...