My Shopping Bag - Prototype #1

MSB from scratch. Attempt #1.

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="https://raw.github.com/Marak/Faker.js/master/Faker.js"></script>
<div id="home" data-role="page">
    <div data-role="header">
        <h1>My Shopping Bag</h1>
        <a href="#" class="ui-btn-left" data-icon="home">Home</a>
        <a href="#" class="ui-btn-right" data-icon="arrow-d" data-iconpos="right">My Account</a>
    </div>
    
    <div data-role="content">
        <a id="product-list-view" href="#">Load Products</a>
    </div>
</div>

<div id="product-list" data-role="page">
    <p>Boo yah!</p>
</div>

JavaScript

var productListView = function(container) {
    var template = '<ul id="products" data-role="listview">{{#products}}<li><a href="#product-list">{{id}}</a></li>{{/products}}</ul>',
        model = {
            products: [
                {
                id: 1,
                name: 'Apple iPhone 4S 16GB - White',
                points: 186000},
            {
                id: 1,
                name: 'Apple iPhone 4S 16GB - Black',
                points: 186000}
            ]
        };

    container
        .html(Mustache.to_html(template, model).replace(/^\s*/mg, ''))
        .find('#products').listview();
};

$('#home').live('pageinit', function(event) {
    console.log('Page init', this, event);
    productListView($('[data-role~=content]', this));
});