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/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

$data.Entity.extend("$org.types.Marker", {
    Id: { type: "int", key: true, computed: true },
    Left: { type: "int", required: true },
    Top: { type: "int", required: true },
    Color: { type: "string", required: true },
    Name: { type: "string", required: true },
    Map: { type: "$org.types.Map", inverseProperty: "Markers" }
});


$data.Entity.extend("$org.types.Map", {
    Id: { type: "int", key: true, computed: true },
    Title: { type: "string", required: true },
    Src: { type: "string", required: true },
    Height: { type: "int", required: true },
    Width: { type: "int", required: true },
    Markers: { type: "Array", elementType: "$org.types.Marker", inverseProperty: "Map" }
});

$data.EntityContext.extend("$org.types.OrgContext", {
    Maps: { type: $data.EntitySet, elementType: $org.types.Map },
    Markers: { type: $data.EntitySet, elementType: $org.types.Marker },
 });
console.log('aa');
var DB = new $org.types.OrgContext({ name: "webSql", databaseName: "Testing"});
console.log('aaaa');
DB.onReady(function(DB) {
    console.log('seggem');
 DB.Maps.single( function (map) { return map.Id == 1; }, {}, function(map) {
     console.log(map);
        var marker = new $org.types.Marker({
            Left: 250,
            Top: 350,
            Color: 'green',
            Name: 'Example',
            Map: map
        });
        DB.Markers.add(marker);
        DB.saveChanges(function() {
            alert(marker.Id)
        });

    });
});
/*
DB.Maps.single( function (map) { return map.Id == 1; }, {}, function(map) {
        var marker = new $org.types.Marker({
            Left: 250,
            Top: 350,
            Color: 'green',
            Name: 'Example',
            Map: map
        });
        DB.Markers.add(marker);
        DB.saveChanges(function() {
            alert(marker.Id)
        });

    });
    */