PEPBrowser: Next Evently Widget (Part II)

Resume Work on the 'pepstatuslist' Widget

Continuing from the previous blog post, lets start improving the 'pepstatuslist' widget. The previous blog post ended with the addition of the some code that enables the 'peplist' widget to trigger a 'setcategory' event when a category is chosen. Lets start adding the code that will listen to the 'setcategory' event.

Inside the 'pepstatuslist' folder, make a script file with the name, 'script.js'. The 'script.js' should contain the following code.

function (e, category) {

  $$(this).category = category;

  $(this).trigger('loadstatuslist');

}

The function in the code above is called when the 'pepstatuslist' widget receives a 'setcategory' event generated by the 'peplist' widget. The function accepts two arguments, the event object and the category value. The category value corresponds to the category clicked/tapped in the 'peplist' widget. The first statement of the function stores a name-value pair to the widget. This is done by the use of the $$ operator. The second statement of the function triggers a 'loadstatuslist' event.

loadstatuslist Handler

The 'loadstatuslist' event handler should load the list of document statuses under the chosen category. Since this event handler is not as simple as the 'setcategory' event handler, we need to make a folder for this event handler. So create a folder inside the 'pepstatuslist' folder with the name, 'loadstatuslist'. Inside the new folder add the javascript file, 'query.js'. The script file should contain the following code.

function () {

  var category = $$(this).category;

  return {

    view: "categorystatus",

    group_level: 2,

    "startkey": [category],

    "endkey": [category, {}]

  };

}

The 'query.js' file contains a function which returns a mapping of query parameters. Remember that in the '_init' event handler of the 'peplist' widget, it contains a 'query.json' file. The 'query.json' contains a mapping literal or JSON string that indicates the query parameters for the event handler. The 'query.json' file has the same purpose as the 'query.js' script. The reason why we use a script is that the query parameters is dynamic, it depends on the value of 'category' name-value pair assigned to the widget through the 'setcategory' event.

Honestly, the above mapping is not that simple and trying to explain it would take quite a long time. If you don't understand the mapping above, I advise you to consult the Views chapter of the "Definitive Guide to CouchDB".

Since, the other parts of the 'loadstatuslist' handler is quite similar to the '_init' handler of the 'peplist' widget. I'll just breeze through the other parts.

The code for 'data.js' follows.

function (data) {

  var l = [];

  for (var i=0; i < data.rows.length; i++) {

    l.push({'category': data.rows[i].key[0], 'status': data.rows[i].key[1], 'count': data.rows[i].value});

  }

  return {'statuslist': l};

};

The code in 'data.js' simply processes the data returned by the query. The function returns a mapping suitable for templating.

The Mustache template follows.

<ul id="pepstatuslist" data-role="listview" data-theme="c" data-dividertheme="b">

  {{#statuslist}}

  <li><a href="#pepdoclist" title="{{category}}|{{status}}">{{status}} ({{count}})</a></li>

  {{/statuslist}}

</ul>

The template simply displays the statuses in a clickable list. It is intended to be clickable so that the user can tap on a status and lead to a list of documents.

Finally, to activate the unordered list generated by the template above into a Jquerymobile list, the following code in 'after.js' is necessary to be executed.

function () {

$('#pepstatuslist').listview();

};

So far we have discussed the common pattern used for the rest of this application. I think that you would be able to understand the rest of the code available in the github repository.