BetterBook Club Bundle Demo

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <label>Bundles
        <ul data-bind='visible:selectedBooks,source:selectedBooks' data-template='templateBook'></ul>
        <ul data-bind='source:bundles' data-template='templateBundle'></ul>
    </label>    
</div>
<script id="templateBook" type="text/x-kendo-template">
    <li style='border-style: solid;border-color: blue;'>        
        <ul>
            <li><span data-bind='text:Name'></span></li>
            <li><span data-bind='text:ID'></span></li>
            <li><span data-bind='text:Description'></span></li>
            <li><span data-bind='text:ASIN'></span></li>
            <li><span data-bind='text:ISBN'></span></li>
            <li><span data-bind='text:ImageUrl'></span></li>
            <li><span data-bind='text:OfferListingID'></span></li>
            <li><span data-bind='text:PrimaryCreator'></span></li>
            <li><span data-bind='text:Quantity'></span></li>
        </ul>
    </li>
</script>
<script id="templateBundle" type="text/x-kendo-template">
    <li style='border-style: solid;border-color: red;'> 
        <span data-bind='text:Name'></span>
        <br/> <br/>
        <span data-bind='text:Description'></span>        
        <button data-bind='click:getBookBundleDetails,invisible:Books'>Get Details</button>
        <button data-bind='click:addBundleToAmazonCart,invisible:Books'>Add To Cart</button>
    </li>
</script>

JavaScript

var vm = new kendo.observable({
    bundles: [],
    selectedBooks: [],
    getBookBundles: function () {
        //this is an example of a cross domain ajax call to get all of the available bundles
        $.ajax({
            type: 'GET',
            async: false,
            contentType: "application/json",
            url: "http://betterbookclubdev.radolo.com/Services/PublicAPI.svc/GetBookBundles",
            dataType: "jsonp"
        }).done(function (results) {
            var filtered = results.filter(function( item ) {
                console.warn(item);
                return item.ID==10;
            });
            
            vm.set('bundles', filtered);
        });
    },
    getBookBundleDetails: function (e) {
        var bundle = e.data;

        //this is an example of a cross domain ajax call to get bundle details
        $.ajax({
            type: 'GET',
            async: false,
            contentType: "application/json",
            url: "http://betterbookclubdev.radolo.com/Services/PublicAPI.svc/GetBookBundleDetails",
            data: {
                BundleID: bundle.ID
            },
            dataType: "jsonp"
        }).done(function (results) {
            console.warn(results);
            vm.set('selectedBooks', results);
        });
    },
    addBundleToAmazonCart:function(e){
        var bundle = e.data;

        //this is an example of a cross domain ajax call to get all of the available bundles
        $.ajax({
            type: 'GET',
            async: false,
            contentType: "application/json",
            url: "http://betterbookclubdev.radolo.com/Services/PublicAPI.svc/AddBundleToAmazonCart",
            data: {
                BundleID: bundle.ID
            },
            dataType: "jsonp"
        }).done(function (results) {
            window.open(results);            
        });
    }
});


kendo.bind($('#container'), vm);

vm.getBookBundles();