@soleil-se/app-util 2.1.4 → 2.2.0

package/README.md

@@ -123,7 +123,8 @@ Get URI for a resource.
 const resourceUri = getResourceUri('file/in/resource.png');
 ```
 ### `renderTemplate(template, [values])` ⇒ `String`
-Renders a Underscore template and returns a string.
+Renders a Underscore template and returns a string.   
+This function is also available inside the template.
 
 **Returns**: `String` - Rendered template
 
@@ -133,11 +134,38 @@ Renders a Underscore template and returns a string.
 | [values] | `Object` | `{}` | Values. |
 
 #### Example
+**Simple example**
 ```javascript
 const string = renderTemplate('<div><%= foo %></div>', {
   foo: 'bar',
 });
 ```
+**Multiple templates**
+```html
+/* views/item.html */
+<li>
+  <%- name %>
+</li>
+```
+```html
+/* views/main.html */
+<ul>
+  <% items.forEach(function(item) { %>
+    <%= renderTemplate(itemTemplate, item) %>
+  <% }); %>
+</ul>
+```
+
+```javascript
+import { renderTemplate } from '@soleil-se/webapp-util';
+import mainTemplate from './views/main.html';
+import itemTemplate from './views/item.html';
+
+const items = [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];
+const string = renderTemplate(mainTemplate, { items, itemTemplate });
+```
+> **NOTE**   
+> Remember that the second argument must be an object and that objects properties are accessed directly in any child templates!   
 ### `isOffline`
 If the webapp is running in offline mode or not.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Utility functions for Webapps.",
   "main": "./src/index.js",
   "author": "Soleil AB",

package/src/index.js

@@ -31,9 +31,9 @@ export function getResourceUri(resource) {
  */
 export function renderTemplate(template, values = {}) {
   if (typeof template === 'function') {
-    return template(values);
+    return template({ ...values, renderTemplate });
   }
-  return _.template(template)(values);
+  return _.template(template)(({ ...values, renderTemplate }));
 }
 
 /**