FlowerShop-Handlebars-EntityClasses

by JayData

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/1.2.7/jaydata.js"></script>
<script src="http://include.jaydata.org/1.2.7/jaydatamodules/handlebars.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
    };

    var Cart = $data.Entity.extend("Cart", {
        cartId:{ type: "int", computed: true, key: true},
        FlowerID: { type: "string" },
        Name: { type: "string" }
    });

    var CartStore = $data.EntityContext.extend("CartStore", {
        CartItems: { type: $data.EntitySet, elementType: Cart }
    });

var cartDB = new CartStore("local");

cartDB.onReady(function() { console.dir(cartDB) });

    function FlowerShowApplication(mydatabase) {

        function listCategories() {
            mydatabase.Categories
                .renderItemsTo("#categories")
                .then(function(categories) { listProducts(categories[0])});
        }
        
        function listProducts(category) {
            mydatabase.Flowers
              .filter("it.Category_ID == catId", { catId: category.id })
              .renderItemsTo("#products");
        };
        
        $data("Category").addCommand("select", listProducts);
        
        function displayCart() {
           cartDB.CartItems.renderTo("#cart", "CartArrayTemplate");
        }


        $data("Flower").addCommand("addToCart", function (flower) {
            cartDB.CartItems.add({ FlowerID: flower.id, Name: flower.Name  });
            cartDB.saveChanges().then(displayCart);
        });

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


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

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