Permalink
Browse files

updating layouts; passing id to details screen

  • Loading branch information...
1 parent 1605032 commit 40ee60ca6892558c2a70ccd99bfb87d21e26d818 @stevenpsmith committed Jan 20, 2012
Showing with 31 additions and 13 deletions.
  1. +11 −11 index.html
  2. +20 −2 js/app.js
View
22 index.html
@@ -20,12 +20,12 @@
<script type="text/template" id="activity-details-template">
<h3><%= type %></h3>
- <div data-role="fieldcontain" id="activitiy-fields">
- Date: <%= date %></br>
- Minutes: <%= minutes %></br>
- Distance: <%= distance %></br>
- Comments: <%= comments %></br>
- </div>
+ <ul data-role="listview" id="activitiy-fields" data-inset="true">
+ <li>Date: <%= date %></br></li>
+ <li>Minutes: <%= minutes %></br></li>
+ <li>Distance: <%= distance %></br></li>
+ <li>Comments: <%= comments %></br></li>
+ </ul>
</script>
<!-- maximum scale added to stop zoom on select controls -->
@@ -36,19 +36,19 @@
<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>
+ <a href="#" data-role="button" data-icon="add" id="add-button" class="ui-btn-right">Add</a>
</div>
<div data-role="content">
<!-- the contents of the list view will be rendered via the backbone view -->
</div>
</div>
- <div data-role="page" id="activityDetails">
+ <div data-role="page" id="activity-details" data-add-back-btn="true">
<div data-role="header">
- <h1>Activitie Details</h1>
- <a href="#" data-role="button" data-icon="edit" id="edit-activity-button">Edit</a>
+ <a href="#" data-role="button" data-icon="arrow-d" id="edit-activity-button" class="ui-btn-right">Edit</a>
+ <h1>Activities Details</h1>
</div>
- <div data-role="content">
+ <div data-role="content" id="activity-details-content">
<!-- the contents of the list view will be rendered via the backbone view -->
</div>
</div>
View
22 js/app.js
@@ -35,7 +35,14 @@ var exercise = {};
$(this.el).empty();
activities.each(function(activity){
- listView.append(template(activity.toJSON()));
+ var renderedItem = template(activity.toJSON()),
+ $renderedItem = $(renderedItem); //convert the html into an jQuery object
+ $renderedItem.jqmData('activityId', activity.get('id')); //set the data on it for use in the click event
+ $renderedItem.bind('click', function(){
+ //set the activity id on the page element for use in the details pagebeforeshow event
+ $('#activity-details').jqmData('activityId', $(this).jqmData('activityId')); //'this' represents the element being clicked
+ });
+ listView.append($renderedItem);
});
container.html($(this.el));
container.trigger('create');
@@ -55,7 +62,7 @@ var exercise = {};
renderedContent = this.template(this.model.toJSON());
container.html(renderedContent);
-// container.trigger('create');
+ container.trigger('create');
return this;
}
});
@@ -81,4 +88,15 @@ $('#add-button').live('click', function(){
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.'});
+});
+
+$('#activity-details').live('pagebeforeshow', function(){
+ console.log('activityId: ' + $('#activity-details').jqmData('activityId'));
+ var activitiesDetailsContainer = $('#activity-details').find(":jqmData(role='content')"),
+ activityDetailsView,
+ activityId = $('#activity-details').jqmData('activityId'),
+ activityModel = exercise.activities.get(activityId);
+
+ activityDetailsView = new exercise.ActivityDetailsView({model: activityModel, viewContainer: activitiesDetailsContainer});
+ activityDetailsView.render();
});

0 comments on commit 40ee60c

Please sign in to comment.