Step-by-step JayStorm: Step 2 - list items and add new item

List todo items, add new todo item

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>
<div style="width:200px;float:left">
    <h3>Add new Todo</h3>
    <form>
        <div>Task:</div>
        <input name="task" type="text"/><br />
        <input type="submit" value="Add Todo" />   
    </form>
</div>
<div style="width:400px;float:left">
<h3>Todo Items</h3>
<ul id="new-items"></ul>    
<ul id="todo-list"></ul>
</div>
<script id="TodoItem" type="x-handlebars-template">
     <li class="todo-item" data-item-id={{id}}>
        <div>
            <span>{{Task}}</span>
            {{#if Completed}}<span>, Completed</span>{{/if}}
        </div>
    </li>
 </script>

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:180px;height:25px}

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

li {
    padding:3px 8px 3px 8px;
    
    border-radius:3px;
    margin-left: 5px; 
    min-width:60px;
    margin-top: 5px; 
    display:inline-block;
    background-color: silver;
}

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");

    $(document).delegate("form", "submit", function() {
        var form = this;
        var todo = todoItems.add({
            Task: form.task.value
        });

        function showNewItem() {
            todo.renderTo("#new-items");
            form.reset();
        }
        
        todoItems.saveChanges().then(showNewItem);
        //prevent form submit
        return false;

    });
});