VP3 Slider - Prototype #1

Requirements: - A good user feedback - Server for accuracy

by davidhong

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/PaulUithol/Backbone-relational/master/backbone-relational.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">

<div id="home" data-role="page">
    <header data-role="header"><h1>My Shopping Bag</h1></header>
    
    <div data-role="content">
    </div>
</div>

<script type="text/template" id="product">
    <div class="product">
        <h1>{{name}}</h1>
        <img src="{{image}}" />
        <div>{{description}}</div>
        <form action="/echo/json" method="post">
            <div data-role="fieldcontain">
                <label for="vp3">Variable points:</label>
                <input type="range" name="vp3" id="vp3" value="{{vp3.points.max}}" 
                       min="{{vp3.points.min}}" max="{{vp3.points.max}}"  />
            </div>
            <div data-role="fieldcontain">
                <input type="text" name="pay" id="pay" value="{{vp3.pay}}" />
                <input type="text" name="points" id="points" value="{{vp3.points.current}}" />
            </div>
            
            <input type="hidden" name="awardid" value="{{id}}" />
            
            <button type="button" data-role="button">Buy</button>
        </form>
    </div>
</script>

CSS

.product img { width: 100%; }
.product div { margin: 1em 0; }

input.ui-slider-input { display:none !important; }

JavaScript

$.mobile.ajaxEnabled = false;

$(function() {
    var VP3 = Backbone.Model.extend({
        defaults: {
            id: '202081',
            points: {
                min: 70500,
                max: 118000,
                current: 118000
            },
            cpp: {
                min: 0.004300,
                max: 0.006300
            },
            pay: 0.00
        }
    });

    var Product = Backbone.Model.extend({
        defaults: {
            id: '202081',
            name: 'Apple iPhone 4S 32gb',
            image: 'http://images.freshnessmag.com/wp-content/uploads//2011/10/summary.png',
            description: 'Discover the features and specifications that set the Apple iPhone 4S 64GB White apart from other mobile phones. It\'s your ticket to a world of information and entertainment via the Telstra network.',
            vp3: new VP3
        },

        // Override toJSON as Backbone doesn't deal with nested/composite models
        toJSON: function() {
            var model = _.clone(this.attributes);
            model.vp3 = _.clone(this.attributes.vp3.attributes);
            return model;
        }
    });

    var ProductView = Backbone.View.extend({
        el: '[data-role~="content"]',
        template: $('#product').html(),
        initialize: function() {            
            this.render();
        },
        render: function() {
            $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())).trigger('create').trigger('updatelayout');
            return this;
        },

        // events for product view
        events: {
            'change #vp3': 'change'
        },

        // raise by sliding the vp3 slider
        change: function(event) {            
            var $vp3 = $('.product #vp3', this.el),
                $form = $('form', this.el),
                current = parseInt($vp3.val(), 10),
                values = {
                    json: $.toJSON({
                        points: current + 1000,
...