FlowerShop-Handlebars-ItemStore

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/handlebars.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
    <script id="Category" type="text/x-handlebars">
        <li><a href="#" {{entityCommand 'select'}}>{{Name}}</a></li>
    </script>

    <script id="Flower" type="text/x-handlebars">
        <li>
            {{Name}}<br />
            <img src="{{ImageUrl}}" style="width:250px;height:150px"><br />
            Price: {{Price }}, 
            <a href="#" {{entityCommand 'addToCart'}}>Add to cart</a>
        </li>
    </script>

    <script id="Cart" type="text/x-handlebars">
        <li>{{Name}} <a href="#" {{entityCommand 'remove'}}>X</a></li>
    </script>

    <script id="CartArrayTemplate" type="text/x-handlebars">
        <h3>Cart</h3>
        <ul>
           {{#each .}} {{renderEntity}} {{/each }}
        </ul>
        <div>
          Total: {{length}} items. 
        </div>
    </script>

    <ul id="categories" style="width:150px;float:left">

    </ul>
    <ul id="products" style="width:300px;float:left">

    </ul>

    <div id="cart" style="width:300px;float:left">

    </div>

JavaScript

var apiKey = { appId: '133e0907-f70b-4f11-92b3-dfebc9bdd6db',
        applicationKey: 'XXX',
        serviceName: 'mydatabase',
        license: 'business',
        isDefault: true
    };

    $data.define("Cart", {
        FlowerID: String,
        Name: String
    }).storeToken = "local";

    function FlowerShowApplication() {

        function listCategories() {
            $data("Category")
                .renderItemsTo("#categories")
                .then(function (categories) {
                    listProducts(categories[0]);
                });
        }
        function listProducts(category) {
            $data("Flower")
              .query("it.Category_ID == catId", { catId: category.id })
              .then($data.renderItemsTo("#products"));
        };
        
        $data("Category").addCommand("select", listProducts);
        
        function displayCart() {
            $data("Cart").renderTo("#cart", "CartArrayTemplate");
        }


        $data("Flower").addCommand("addToCart", function (flower) {
            $data("Cart")
                .save({ FlowerID: flower.id, Name: flower.Name  })
                .then(displayCart);
        });

        $data("Cart").addCommand("remove", function (cartItem) {
            cartItem.remove().then(displayCart);
        });


        this.start = function () {
            listCategories();
            displayCart();
        }
    }


    $data.initService(apiKey).then(function () {
        new FlowerShowApplication().start();
    });