Add the User View

Finally, you add a simple page view that displays a selected customer’s details. This view is the second page in this app. The customer navigates to it by tapping an item in the Users list view. The user-page template defines a Back button that returns the customer to the search list.

Immediately after the UserListItemView view definition, create the view for a customer’s details. Extend Backbone.View again. For the remainder of this procedure, add all code in the extend({}) block.
1app.views.UserPage = Backbone.View.extend({ 2 3});

Specify the template to be instantiated.

1app.views.UserPage = Backbone.View.extend({
2    template: _.template($("#user-page").html()),
3});

Implement a render() function. This function re-reads the model and converts it first to JSON and then to HTML.

1app.views.UserPage = Backbone.View.extend({
2    template: _.template($("#user-page").html()),
3
4    render: function(eventName) {
5        $(this.el).html(this.template(this.model.toJSON()));
6        return this;
7    }
8});

Example

Here’s the complete extension.

1app.views.UserPage = Backbone.View.extend({
2    template: _.template($("#user-page").html()),
3    render: function(eventName) {
4        $(this.el).html(this.template(this.model.toJSON()));
5        return this;
6    }
7});

Mobile SDK Development Guide

Add the User View

Example