четверг, 8 октября 2009 г.

JQuery Template Plugin. Fill template string with JSON data

You have a JSON data and a template string. So you can do it easy just use such code below:



  1. /*
  2. * jQuery Template plugin 1.3
  3. *
  4. * Copyright (c) 2009 Anton Kolodii
  5. *
  6. * Dual licensed under the MIT and GPL licenses:
  7. *  http://www.opensource.org/licenses/mit-license.php
  8. *  http://www.gnu.org/licenses/gpl.html
  9. */
  10. ;(function($) {
  11.   function Property() {
  12.     this.Name = "";
  13.     this.pos = -1;
  14.   };
  15.   function PatternEntities() {
  16.     this.str = "";
  17.   };
  18.   jQuery.extend( {
  19.     prepare : function(str) {
  20.       var NameList = new Array();
  21.       var i = 0;
  22.       while (true) {
  23.         var sear = str.search(/{(.)*}/gi);
  24.         if (sear == -1)
  25.           break;
  26.         var name = str.substring(sear + 1, str.indexOf("}"));
  27.         if (name.indexOf("foreach:") == -1) {
  28.           var property = new Property();
  29.           property.pos = sear;
  30.           property.Name = name;
  31.           property.type = 'property';
  32.           str = str.replace("{" + name + "}", "");
  33.           NameList[i] = property;
  34.         } else {
  35.           //name = name.substring(8); //why .substring(8), because "foreach:" has 8 symbols and now name has such form "foreach:name"
  36.           var nestedstr = str.substring(str.indexOf("}") + 1, str.indexOf("{/foreach:" + name.substring(8) + "}"));
  37.           var strEntity = $.prepare(nestedstr);
  38.           strEntity.pos = sear;
  39.           strEntity.Name = name.substring(8);
  40.           strEntity.type = 'entity';
  41.           NameList[i] = strEntity;
  42.           str = str.replace(new RegExp("{foreach:" + strEntity.Name + "}.*{\/foreach:" + strEntity.Name + "}", "i"), "");
  43.         }
  44.         i++;
  45.       }
  46.       var entity = new PatternEntities();
  47.       entity.Name = "";
  48.       entity.str = str;
  49.       entity.type = 'root';
  50.       entity.Parameters = NameList;
  51.       return entity;
  52.     },
  53.  
  54.     filltemplate : function(Entities, data) {
  55.  
  56.       function insert(str, ins, pos) {
  57.         return str.substring(0, pos) + ins + str.substring(pos);
  58.       }
  59.       ;
  60.  
  61.       function fillTemplate(template, data, NameList) {
  62.         var fultmpl = template;
  63.         for (i = NameList.length - 1; i >= 0; i--) {
  64.           fultmpl = insert(fultmpl, data[NameList[i].Name],
  65.               NameList[i].pos);
  66.         }
  67.         return fultmpl;
  68.       }
  69.       ;
  70.  
  71.       var NameList = Entities.Parameters;
  72.       var paternStr = Entities.str;
  73.       if (NameList && NameList.length > 0) {
  74.         for ( var i = NameList.length - 1; i >= 0; i--) {
  75.           if (NameList[i].type == "entity") {
  76.             if (NameList[i].Name) {
  77.               var eachstr = "";
  78.               $.each(data[NameList[i].Name], function(i, item) {
  79.                 eachstr += $.filltemplate(NameList[i], item);
  80.               });
  81.               paternStr = insert(paternStr, eachstr, NameList[i].pos);
  82.             } else {
  83.               var eachstr = "";
  84.               $.each(data, function(j, item) {
  85.                 eachstr += $.filltemplate(NameList[i], item);
  86.               });
  87.               paternStr = insert(paternStr, eachstr, NameList[i].pos);
  88.             }
  89.           } else {
  90.             paternStr = insert(paternStr, data[NameList[i].Name], NameList[i].pos);
  91.           }
  92.         }
  93.       } else {
  94.         return paternStr;
  95.       }
  96.       return paternStr;
  97.     },
  98.  
  99.     stringformat : function(str, data) {
  100.       var entities = $.prepare(str);
  101.       return $.filltemplate(entities, data);
  102.     }
  103.   });
  104. })(jQuery);
* This source code was highlighted with Source Code Highlighter.



So, for instance, your template string is:

template =
<div style="color: red;" >
Thank you.
{foreach:} <span style="color: green; margin: 10px;"> Wine - {wine} </span>
<span>Sugar - {sugar} Lemon is {lemon} </span> {/foreach:}
</div>


And your JSON data is:

  data = [{"wine":3,"sugar":4,"lemon":22},{"wine":2,"sugar":3,"lemon":12}]

So after executing function from this plug-in we receive new string:

  var resultstr = $.stringformat(template, data);


Return this result:

<div style="color: red;" >
Thank you.
<span style="color: green; margin: 10px;" > Wine - 3 </span>
<span> Sugar - 4 Lemon is 22
<span style="color: green; margin: 10px;"> Wine - 2 </span>
<span> Sugar - 3 Lemon is 12 </span>
</div>



Download js file from link

P.S. This is my first JQuery plug-in. Please write in comment if you have questions.

Share/Save/Bookmark

Комментариев нет:

Отправить комментарий