Steven Smith stevenpsmith

stevenpsmith / snippet.html

Created December 12, 2011 20:56

	<!DOCTYPE html>
	<html>
	<head>
	<title>Exercise</title>

	<link rel="stylesheet" href="style/jquery.mobile-1.0.css" />

	<script src="js/vendor/jquery-1.6.4.min.js"></script>
	<script src="js/vendor/jquery.mobile-1.0.min.js"></script>
	<script src="js/vendor/underscore.js"></script>

stevenpsmith / snippet.js

Created December 12, 2011 21:06

	[
	{
	"id":1,
	"date": "12/12/2011",
	"type": "Run",
	"distance": "3 miles",
	"comments": "This was really hard",
	"minutes": 36
	},
	{

stevenpsmith / snippet.html

Created December 14, 2011 19:01

	<div data-role="page" id="activities">
	<div data-role="header">
	<h1>Activities</h1>
	<a href="#" data-role="button" data-icon="add" id="add-button">Add</a>
	</div>
	<div data-role="content">
	<!-- the contents of the list view will be rendered via the backbone view -->
	</div>
	</div>

stevenpsmith / snippet.js

Created December 14, 2011 19:12

	exercise.Activity = Backbone.Model.extend({
	});

	exercise.Activities = Backbone.Collection.extend({
	model: exercise.Activity,
	url: "exercise.json"
	});

stevenpsmith / snippet.js

Created December 14, 2011 19:19

	exercise.initData = function(){
	exercise.activities = new exercise.Activities();
	exercise.activities.fetch({async: false}); // use async false to have the app wait for data before rendering the list
	};

stevenpsmith / snippet.html

Created December 14, 2011 19:27

	<script type="text/template" id="activity-list-item-template">
	<li><a href="#activity-details" identifier="<%= id %>"><%= date %> - <%= type %></a></li>
	</script>

stevenpsmith / snippet.js

Created December 14, 2011 20:31

	exercise.ActivityListView = Backbone.View.extend({
	tagName: 'ul',
	id: 'activities-list',
	attributes: {"data-role": 'listview'},

	initialize: function() {
	this.template = _.template($('#activity-list-item-template').html());
	},

	render: function() {

stevenpsmith / snippet.js

Created December 14, 2011 21:19

	$('#activities').live('pageinit', function(event){
	var activitiesListContainer = $('#activities').find(":jqmData(role='content')"),
	activitiesListView;
	exercise.initData();
	activitiesListView = new exercise.ActivityListView({collection: exercise.activities, viewContainer: activitiesListContainer});
	activitiesListView.render();
	});

stevenpsmith / snippet.js

Created December 14, 2011 21:27

	add: function(item) {
	var activitiesList = $('#activities-list'),
	template = this.template;

	activitiesList.append(template(item.toJSON()));
	activitiesList.listview('refresh');
	}

stevenpsmith / snippet.js

Created December 14, 2011 21:35

	$('#add-button').live('click', function(){
	exercise.activities.add({id: 6, date: '12/15/2011', type: 'Walk', distance: '2 miles', comments: 'Wow...that was easy.'});
	});