Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Add the Search Result List Item View

To define the search result list item view, you design and implement the view of a single row in a list. Each list item displays the following user fields:

SmallPhotoUrl
FirstName
LastName
Title

Immediately after the UserListView view definition, create the view for the search result list item. Once again, extend Backbone.View and indicate that this view is a list item by defining the tagName member. For the remainder of this procedure, add all code in the extend({}) block.
1app.views.UserListItemView = Backbone.View.extend({ 2 3});

Add an <li> tag.

1app.views.UserListItemView = Backbone.View.extend({
2    tagName: "li",
3});

Load the template by calling _.template() with the raw content of the user-list-item script.
1template: _.template($("#user-list-item").html()),
Add a render() function. The template() function, from underscore.js, takes JSON data and returns HTML crafted from the associated template. In this case, the function extracts the customer’s data from JSON and returns HTML that conforms to the user-list-item template. During the conversion to HTML, the template() function replaces free variables in the template with corresponding properties from the JSON data.
1render: function(eventName) { 2 $(this.el).html(this.template(this.model.toJSON())); 3 return this; 4},
Add a close() method to be called from the list view that does necessary cleanup and stops memory leaks.
1close: function() { 2 this.remove(); 3 this.off(); 4}

Example

Here’s the complete extension.

1app.views.UserListItemView = Backbone.View.extend({
2    tagName: "li",
3    template: _.template($("#user-list-item").html()),
4    render: function(eventName) {
5        $(this.el).html(this.template(this.model.toJSON()));
6        return this;
7    },
8    close: function() {
9        this.remove();
10        this.off();
11    }
12});

Mobile SDK Development Guide

Add the Search Result List Item View

Example