add data-blapy-template-mustache-delimiter + fix on processdata func…

…tion
intersel · Oct 22, 2019 · 628242e · 628242e
1 parent 1380682
commit 628242e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/Blapy.js b/Blapy.js
@@ -8,6 +8,10 @@
  *
  * -----------------------------------------------------------------------------------------
  * Modifications :
+ * - 2019/10/22 - E.Podvin - 1.12.0
+ *  - add data-blapy-template-mustache-delimiterStart and data-blapy-template-mustache-delimiterEnd to be able to change mustache delimiters when rendering template
+ * - 2019/10/19 - E.Podvin - 1.11.1
+ *  - set eval of data-blapy-template-init-processdata function out of the catch error test for json validation
  * - 2019/10/19 - E.Podvin - 1.11.0
  *  - add data-blapy-template-init-processdata
  * - 2019/10/18 - E.Podvin - 1.10.4
@@ -1157,18 +1161,19 @@ theBlapy.prototype.getObjects = function (obj, key, val) {
                         });
                       });
                     }
-                    if (myContainer.attr('data-blapy-template-init-processdata')
-                        && (myContainer.attr('data-blapy-template-init-processdata') != "")
-                      )
-                    {
-                      aJsonDataFunction = myContainer.attr("data-blapy-template-init-processdata");
-                      if (aJsonDataFunction) eval('if (typeof '+aJsonDataFunction+' === "function") jsonDataObj='+aJsonDataFunction+'(jsonDataObj)');
-                    }
                   } catch (e) {
                     myFSM._log('downloaded content can not be evaluated, so is not json data: ' + jsonData, 1);
                     return;
                   }
 
+                  if (myContainer.attr('data-blapy-template-init-processdata')
+                      && (myContainer.attr('data-blapy-template-init-processdata') != "")
+                    )
+                  {
+                    aJsonDataFunction = myContainer.attr("data-blapy-template-init-processdata");
+                    if (aJsonDataFunction) eval('if (typeof '+aJsonDataFunction+' === "function") jsonDataObj='+aJsonDataFunction+'(jsonDataObj)');
+                  }
+
                   // Get the json Template
                   var htmlTpl = $();
                   var htmlAllTpl = myContainer.children('[data-blapy-container-tpl]');
@@ -1230,11 +1235,26 @@ theBlapy.prototype.getObjects = function (obj, key, val) {
 
                     if ( (typeof(Mustache) != "undefined") )
                     {
-          						if (htmlTplContent.includes("{{"))
-          						{ //ok that's mustache templating
-          							//jsonDataObj = jsonFeatures.parse(jsonData);
+                      var mustacheStartDelimiter = '{{';
+                      var mustacheEndDelimiter = '}}';
+                      var newDelimiters = '';
+                      if (myContainer.attr('data-blapy-template-mustache-delimiterStart')
+                          && (myContainer.attr('data-blapy-template-mustache-delimiterStart') != "")
+                        )
+                      {
+                        //want to apply other mustache tag delimiters
+                        mustacheStartDelimiter = myContainer.attr('data-blapy-template-mustache-delimiterStart');
+                        mustacheEndDelimiter = myContainer.attr('data-blapy-template-mustache-delimiterEnd');
+                        newDelimiters =   "{{="+mustacheStartDelimiter+" "+mustacheEndDelimiter+"=}}";
+                      }
 
-          							newHtml = Mustache.render("{{#.}}"+htmlTplContent+"{{/.}}",jsonDataObj);
+          						if ( (newDelimiters != '') || htmlTplContent.includes("{{") )
+          						{ //ok that's mustache templating
+          							newHtml = Mustache.render(
+                          newDelimiters
+                          +mustacheStartDelimiter+"#."+mustacheEndDelimiter
+                          +htmlTplContent
+                          +mustacheStartDelimiter+"/."+mustacheEndDelimiter,jsonDataObj);
           							parsed=true;
           						}
                     }

diff --git a/README.md b/README.md
@@ -358,6 +358,8 @@ To define a Blapy Block, you need to use the following attributes:
       * **data-blapy-template-header** (option): once the json data are rendered, it is possible to set a header (ex: "```<tr><th>header</th></tr>```")
       * **data-blapy-template-footer** (option): once the json data are rendered, it is possible to set a footer (ex: "```<tr><th>footer</th></tr>```")
       * **data-blapy-template-default-id** (option): if multiple templates are set, set the default one to use on initialization. Default to the first found one.
+      * **data-blapy-template-mustache-delimiterStart** (option): available for mustache template, blapy will change the default start and end delimiters and use the new mustache delimiters when parsing the block. Actually, the new delimiters are set at the beginning of the template just before rendering, allowing blocks parsed within blocks with different rendering tags. Example: "<%"
+      * **data-blapy-template-mustache-delimiterEnd** (option): available for mustache template and should be defined if  data-blapy-template-mustache-delimiterStart is defined. Example: "%>"
       * **data-blapy-template-init** (option): a (REST) URL to get json data to use to initialize the block
         * **data-blapy-template-init-params** (option): json string of the parameters to send to the URL
         * **data-blapy-template-init-method** (option): 'GET' (default) || 'POST' || 'PUT' || 'DELETE'

diff --git a/demos/demo_json_init_with_mustache/index-purejson.html b/demos/demo_json_init_with_mustache/index-purejson.html
@@ -36,8 +36,12 @@ <h1>Select values with the json feature of Blapy </h1>
 			data-blapy-container-content="fnameOptionsFirstName"
 			data-blapy-update="json"
 			data-blapy-template-wrap='<select name="firstname" onChange="getJson();">'
+			data-blapy-template-mustache-delimiterStart="<%"
+			data-blapy-template-mustache-delimiterEnd="%>"
 		>
-			<option value="{{firstname}}">{{firstname}}</option>
+		<xmp style="display:none;">
+			<option value="<%firstname%>"><%firstname%></option>
+		</xmp>
 		</span>
 		<br>
 		Choose a lastname: