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({});

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});

We've Moved

Welcome to the new home of the Mobile SDK Developer Guide! For now, the Japanese guide can be found in PDF form.