Devant la "foule" de commentaires (hum), je continue (tout seul) mon épopée dans les méandres de CouchDB.

Dans les points non traités la dernière fois, nous allons voir ce jour :

  • Voir comment on peut remplacer le "My favs ... " dans head.html par une variable extérieure au template (facile - déjà fait mais cela rajoutait une grande quantité d"infos à ce post déjà très long je pense...),
  • Mieux comprendre les "!json" et "!code".

Externaliser le "My favs ..."

Commençons par créer un fichier "myfav.json" à la racine du projet contenant, qui contiendra une valeur qui sera utilisé dans la balise title et en tête de page du site :

 javascript
{
   "title": "My favs - All my bookmarks."
}

Ensuite dans "list/all.js", nous avons deux actions à mener :

  • Faire en sorte que ce fichier soit lu lors de la création de la liste, afin de récupérer la valeur de "title",
  • Mettre à la disposition du template la valeur title contenu dans myfav.json.

Ce qui nous donne :

 javascript
function(head, row, req, info) {
  // !json templates.all
  // !code vendor/couchapp/path.js
  // !code vendor/couchapp/template.js
  // !json myfav

  return respondWith(req, {
    html : function() {
      if (head) {
        return template(templates.all.head, {
          assets : assetPath(),
          title : myfav.title,
        });
      } else if (row) {
        return template(templates.all.row, {
          fav: row.value,          
        });
      } else {
        return template(templates.all.tail, {
            assets : assetPath(),
        });
      }
    },
  })
};

Dans la mesure où je ne veux faire apparaître la valeur de "title" que pour la balise <title></title> et en tête de page, je n'ai besoin de le fournir que pour le template head.

D'ailleurs le fichier templates/all/head.html devient :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../../style/main.css" type="text/css"/>
    <title><%= title %></title>
  </head>
  <body>
    <div id="header">
        <h1><%= title %></h1>
    </div>
    <div id="content">
      <h2>Recently...</h2>
      <dl>

Si vous rajoutez par ex <%= title %> dans templates/all/row.html en pensant que la valeur sera renseignez et bien vous vous trompez et provoquerez une jolie erreur au niveau de CouchDB.

Faites un push de votre application et rendez-vous ensuite sur http://localhost:5984/myfav/_design/mycouchfav/_list/all/favs/ pour apprécier le résultat.

Dans la même veine, il vous reste à modifier "shows/fav.js" et "templates/fav.html" ; par contre, utilisant déjà la variable title pour le titre du favori, j'utilise à la place la variable site_title :

 javascript
function(doc, req) {  
  // !json templates.fav
  // !code vendor/couchapp/template.js
  // !code vendor/couchapp/path.js
  // !json myfav

  // we only show html
  return template(templates.fav, {
    title : doc.title,
    url : doc.url,
    description : doc.description,
    assets : assetPath(),
    site_title : myfav.title,
  });
}

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %> - <%= site_title %></title>
    <link rel="stylesheet" href="../../style/main.css" type="text/css">
  </head>
  <body>
    <div id="header">
        <h1><%= site_title %></h1>
    </div>
    <div id="content">
      <h2><a href="<%= url %>"><%= title %></a></h2>
        <div class="body"><%= description %></div>
    </div>    
  </body>
  <script src="/_utils/script/json2.js"></script>
  <script src="/_utils/script/jquery.js?1.2.6"></script>
  <script src="/_utils/script/jquery.couch.js"></script>
  <script src="<%= assets %>/vendor/couchapp/jquery.couchapp.js"></script>
</html>

Faites un push de votre application et rendez-vous ensuite sur http://localhost:5984/myfav/_design/mycouchfav/_show/fav/couchdbkit pour apprécier le résultat.

Mieux comprendre "!json" et "!code"

Grosso modo, !code et !json ont la même objectif : insérer des données dans votre vue. La différence tient dans le fait que !code injecte du code alors que !json injecte des données ou des fichiers (en utilisant par ex !json _attachments/file.ext).

De même, attention lors de vos inclusions : dans le cas d'une arboresence, si vous appelez un élément de premier niveau, alors tous ses sous-niveaux seront inclus. L'écriture suivante est donc redondante :

 javascript
function(doc) {
  // !json lib
  // !json lib.templates.post
}

Pour plus d'info, voir la fin de cette page.

Voilà pour aujourd'hui, suite au prochain épisode...