CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<div id="app"></div>

<script type="text/mustache" id="list">
    <votes>
<div class="photos">
					<ul>
	{{#slice photos offset="0" limit="5"}}
                         <li class="polaroid">
	            <a href="javascript://"><img src="img/{{file_name}}.jpg"/></a>
	            <div class="user">
	                <p><b>Nom:</b>{{lname}}</p>
	                <p><b>Prénom:</b> {{fname}}</p>
	            </div>
	        </li>
                        {{/slice}}

		
</ul>

					</div>
			<div class="photos">
			<ul>
{{slice photos offset="5" limit="10"}}
                 <li class="polaroid">
	            <a href="javascript://"><img src="img/{{file_name}}.jpg"/></a>
	            <div class="user">
	                <p><b>Nom:</b>{{lname}}</p>
	                <p><b>Prénom:</b> {{fname}}</p>
	            </div>
	        </li>
                {{/slice}}
</ul>
        </div>
        </votes>
    </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;
}

JavaScript

can.Component.extend({
        tag: 'votes',
        scope: {
            photos: new can.List([
                {
                    file_name:'photo-uploaded',
                    lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                },
                {file_name:'photo-uploaded',
                             lname:'Lorem',
                    fname:'Lorem'
                }
                ])
          
        },
        events: {
        },
        helpers: {
            slice:function(list,context){
                if(typeof list=='function'){
                    list=list();
               }

                var photos = [],
                output='',
                offset = parseInt(context.hash.offset) || 0,
                limit = parseInt(context.hash.limit) || 5;
               
                if(list.length){
             ...