Step-by-step JayStorm: Simple CRUD

See how easy to setup a full CRUD cycle with JayStorm and 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:250px;float:left;">
    <h3>Add new Todo</h3>
<form>
    <div>Task:</div>
    <input name="task" required type="text"/><br />
    <input type="submit" value="Add Todo" />
    <span style="display:none" id="loading-indicator">Loading...</span>
</form>
    <small>Experiment with adding a new Todo. 
        Check the network console in your browser to 
        intercept REST based communications</small>    
</div>
    
<div style="width:300px;float:left">
<script id="TodoItem" type="x-handlebars-template">
     <li class="todo-item" data-item="todo">
        <div>
            <span>{{Task}}</span>
            <input data-complete-id={{id}} type="checkbox" 
                   {{#if Completed}}checked{{/if}} />
        </div>
    </li>
 </script>
<h3>Todo Items, show completed items too: <input data-filter type="checkbox" checked /> </h3>
<ul id="new-items"></ul>
<ul id="todo-list"></ul>
</div>

CSS

body {
    font-family: 'Calibri';
}
li {
    padding:3px 8px 3px 8px;
    
    border-radius:3px;
    margin-left: 5px; 
    min-width:60px;
    margin-top: 5px; 
    float:left;
    background-color: silver;
}
ul { margin-left: 15px; }

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

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

form { margin-left:5px;}

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;
    
    var showAll = true;
    function displayTodoItems() {
        todoItems
            .orderByDescending("it.CreationDate")
            .filter("showAll || it.Completed == false", {showAll: showAll})
            .take(20)
            .renderTo("#todo-list");         
    }
    
    displayTodoItems();
    
    $(document).delegate("[data-filter]", "click", function() {
        showAll = this.checked;
        displayTodoItems();
        $('#new-items').empty();
    });
    
    $(document).delegate("form", "submit", function() {
        var form = this;
        var todo = todoItems.add({
            Task: form.task.value
        });

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

        //always wait for saveChanges to render the new item
        //the server might have fill in some autogenerated fields like id
        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;
    });


});