Add the Search View
To create the view for a screen, you extend Backbone.View
. Let’s start by defining the search view. In this extension, you load the template, define subviews and event handlers, and implement the functionality for rendering the views and performing a SOQL search query.
-
In the
<script>
block where you defined the User and UserCollection models, create aBackbone.View
extension namedSearchPage
in theapp.views
array.For the remainder of this procedure, add all code to the
extend({})
block. Each step adds another item to the implementation list and therefore ends with a comma, until the last item. -
Load the search-page template by calling the
_.template()
function. Pass it the raw HTML content of thesearch-page
script tag. -
Add a
keyup
event. You define thesearch
handler function a little later. -
Instantiate a subview named
UserListView
that contains the list of search results. (You defineapp.views.UserListView
later.) -
Create a
render()
function for the search page view. Rendering the view consists of loading the template as the app’s HTML content. Restore any criteria previously typed in the search field and render the subview inside the<ul>
element. -
Implement the
search
function. This function is thekeyup
event handler that performs a search when the customer types a character in the search field.
Here’s the complete extension.