shop model

by rwaldin

HTML

<script src="http://canjs.com/release/latest/can.zepto.js"></script>
<script src="http://canjs.com/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.com/release/latest/can.construct.super.js"></script>
<script src="http://canjs.com/release/latest/can.observe.attributes.js"></script>
<div class="header">
    <h1>Testing CanJS + Zepto</h1>
</div>

<!-- YOUR CODE HERE -->
<div id="putTileWidgetHere"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="price_range_template" type="text/mustache">
    <span class="price-range">{{currencySymbol}}{{lowPrice}} - {{currencySymbol}}{{highPrice}}</span>
</script>

<script id="tile_template" type="text/mustache">
    <p id="msg">ID: {{tile.id}}</p>
    <p><a href="#">Click me for a random ID</a></p>
    Enter a new ID: <input type="number" id="input" {{value tile.id}}/>
    <dl>
        <dt>name</dt><dd>{{tile.name}}</dd>
<!--         <dt>thumbnailUrl</dt><dd>{{tile.thumbnailUrl}}</dd>
        <dt>priceRange</dt><dd>{{#tile.priceRange}}{{>price_range_template}}{{/tile.priceRange}}</dd> -->
    </dl>
</script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
p { 
    margin: 10px 0;
}
dt {float: left; margin-right: 10px}
input {width: 6em; font-size: 80%}

JavaScript

(function() {
    function addNames(namespace, context) {
        for(var prop in context) {
            if(prop.match(/^[A-Z][^A-Z]/) && context.hasOwnProperty(prop)) {
                var constructor = context[prop];
                if(constructor === constructor.constructor && !constructor.fullName) {
                    can.extend(constructor, {
                        fullName: namespace + '.' + prop,
                        shortName: prop,
                        namespace: namespace
                    });
                    addNames(constructor.namespace, constructor);
                }
            }
        }
    }
    addNames('can', can);
    // the can.Observe.attributes plugin doesn't make declared attributes inheritable... this patch fixes that
    var oldObserveSetup = can.Observe.setup;
    can.Observe.setup = function(superConstructor, stat, proto) {
        oldObserveSetup.apply(this, arguments);
        this.attributes = can.extend({}, superConstructor.attributes || {}, this.attributes || {});
    };
    var oldConstructSetup = can.Construct.setup;
    can.Construct.setup = function(superConstructor, fullName, statics, protos) {
        oldConstructSetup.apply(this, arguments);
        this.baseConstructor = superConstructor;
    };
}());

(function(undefined) {
    window.wsi = window.wsi || {};

    can.Observe("wsi.PriceRange", {
        attributes: {
            currencySymbol: 'default',
            lowPrice: 'default',
            highPrice: 'default'
        }
    }, {});

    can.Observe("wsi.AssortmentItem", {
        attributes: {
            id: 'number',
            name: 'string'
        },
        defaults: {
            id: -1,
            name: ''
        },
        convert: {
            'wsi.PriceRange': function(obj) {
                return new wsi.PriceRange(obj);
            },
            'can.Observe.List': function(arr) {
                return new can.Observe.List(arr);
            }
        }
    }, {});
   ...