Adding a JsRender template

At the end of the last task we used the changePage() method to call a new page, so now we need to create that page. We can add our JsRender template to the new page ready for when we build the list view in the next task.

Prepare for Lift Off

Create a new page using the starting template from jQuery Mobile once again. Call it bounty-hunter-list.html and save it in the root of our project folder. Change the id attribute of the data-role="page" wrapper to list.

The <h1> in the header <div> can be changed to something like Active Bounties, and we can add the home icon again as we did on the About page. The footer can stay the same as on the welcome page. The content <div> can be empty to begin with.

Engage Thrusters

Near the bottom of the new page we just created, inside the page container, add the following JsRender template:

<script id="listTemplate" type="text/x-jquery-tmpl">
    <ul data-role="listview">

        {{for items}}
         ...