Step-by-step JayStorm: Step 1b - list items with JayData and Handlebars

List todo items

by kougiland

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>
<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>
<div>
  <h3>All Todo Items Handlebars</h3>
  <ul id="todo-list"></ul>
</div>    
<div>
  <h3>Last two incomplete items</h3>
  <ul id="incomplete-todos"></ul>
</div>

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}

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) {


    //all todo items with JayData + Handlebars
    mydatabase.TodoItems.renderTo("#todo-list");

    //last two incomplete items
    mydatabase.TodoItems
        .filter("it.Completed == false")
        .orderByDescending("it.CreationDate")
        .take(2)
        .renderTo("#incomplete-todos");

    // database.items.renderTo() is equivalent with...
    /*
    mydatabase
        .TodoItems
        .toArray()
        .then(function(items) { $('#todo-list').empty(); return items;})
        .then(function(items) {
            console.log(arguments);
            items.forEach(function(item) {
                item.renderTo("#todo-list");
            });
            
        });
    */

});