Skip to content
Browse files

updating for blog article

  • Loading branch information...
1 parent 280c306 commit 6b54571351d42603491551bb9e6e7ce83dbdb964 @stevenpsmith committed Dec 15, 2011
Showing with 93 additions and 8 deletions.
  1. +12 −5 exercise.json
  2. +10 −3 index.html
  3. +71 −0 js/app.js
View
17 exercise.json
@@ -1,26 +1,33 @@
-
[
{
+ "id":1,
"date": "12/12/2011",
- "length": "3 miles",
+ "type": "Run",
+ "distance": "3 miles",
"comments": "This was really hard",
"minutes": 36
},
{
+ "id":2,
"date": "12/11/2011",
- "length": "6 miles",
+ "type": "Bike",
+ "distance": "6 miles",
"comments": "All down hill...felt like nothing",
"minutes": 30
},
{
+ "id":3,
"date": "12/10/2011",
- "length": "2.5 miles",
+ "type": "Walk",
+ "distance": "2.5 miles",
"comments": "Shouldn't have taken the dog",
"minutes": 45
},
{
+ "id":4,
"date": "12/09/2011",
- "length": "Long",
+ "type": "Run",
+ "distance": "Long",
"comments": "Legs felt good",
"minutes": 75
}
View
13 index.html
@@ -10,6 +10,14 @@
<script src="js/vendor/underscore.js"></script>
<script src="js/vendor/backbone.js"></script>
+ <!-- App specific scripts -->
+ <script src="js/app.js"></script>
+
+ <!-- templates -->
+ <script type="text/template" id="activity-list-item-template">
+ <li><a href="#activity-details" identifier="<%= id %>"><%= date %> - <%= type %></a></li>
+ </script>
+
<!-- maximum scale added to stop zoom on select controls -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
@@ -18,11 +26,10 @@
<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">
- <ul data-role="listview">
- <li><a href="#">There is nothing in my list yet</a></li>
- </ul>
+ <!-- the contents of the list view will be rendered via the backbone view -->
</div>
</div>
View
71 js/app.js
@@ -0,0 +1,71 @@
+/*jslint browser: true */
+/*global _, jQuery, $, console, Backbone */
+
+var exercise = {};
+
+(function($){
+
+ exercise.Activity = Backbone.Model.extend({
+ });
+
+ exercise.Activities = Backbone.Collection.extend({
+ model: exercise.Activity,
+ url: "exercise.json"
+ });
+
+ exercise.ActivityListView = Backbone.View.extend({
+ tagName: 'ul',
+ id: 'activities-list',
+ attributes: {"data-role": 'listview'},
+
+ initialize: function() {
+ this.collection.bind('add', this.add, this);
+ this.template = _.template($('#activity-list-item-template').html());
+ },
+
+ render: function() {
+ var container = this.options.viewContainer,
+ activities = this.collection,
+ template = this.template,
+ listView = $(this.el);
+
+ $(this.el).empty();
+ activities.each(function(activity){
+ listView.append(template(activity.toJSON()));
+ });
+ container.html($(this.el));
+ container.trigger('create');
+ return this;
+ },
+
+ add: function(item) {
+ var activitiesList = $('#activities-list'),
+ template = this.template;
+
+ activitiesList.append(template(item.toJSON()));
+ activitiesList.listview('refresh');
+ }
+ });
+
+ 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
+ };
+
+}(jQuery));
+
+$('#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();
+});
+
+$('#add-button').live('click', function(){
+ var today = new Date(),
+ date;
+
+ date = (today.getMonth() + 1) + "/" + today.getDate() + "/" + today.getFullYear();
+ exercise.activities.add({id: 6, date: date, type: 'Walk', distance: '2 miles', comments: 'Wow...that was easy.'});
+});

0 comments on commit 6b54571

Please sign in to comment.
Something went wrong with that request. Please try again.