{"id":794,"date":"2015-05-02T17:49:41","date_gmt":"2015-05-02T17:49:41","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=794"},"modified":"2015-05-02T17:50:41","modified_gmt":"2015-05-02T17:50:41","slug":"element-creation-with-templates","status":"publish","type":"post","link":"http:\/\/blog.silverterra.net\/?p=794","title":{"rendered":"element creation with templates"},"content":{"rendered":"<blockquote><p>Goal: to create a quick template based element creation method<\/p><\/blockquote>\n<p>Everyday task to manage item templates. We have a container <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">&lt;div id=&quot;cont&quot;&gt;&lt;\/div&gt;<\/code> and the template of the items.<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\nvar tmp = '&lt;div id=&quot;%id%&quot; value=&quot;%value%&quot;&gt;%obj%&lt;\/div&gt;',\r\n    itms = [{id: 1, value: 'val1', obj: 'first'},{id: 2, value: 'val2', obj: 'second'}];\r\nconsole.log(tmp.template(itms));\r\nor\r\n$('#cont').html(tmp.template(itms));\r\n<\/pre>\n<p>the result will be:<\/p>\n<pre data-enlighter-language=\"raw\" class=\"EnlighterJSRAW\">\r\n&lt;div id=&quot;1&quot; value=&quot;val1&quot;&gt;first&lt;\/div&gt;&lt;div id=&quot;2&quot; value=&quot;val2&quot;&gt;second&lt;\/div&gt;\r\n<\/pre>\n<p>to achieve this we have to extend the String object with a template function:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\nTypeExtend(String, 'template', function(data) {\r\n  if(data instanceof Array){\r\n    var ret = '';\r\n    for(i in data){\r\n      ret += this.template(data[i]);\r\n    }\r\n    return ret;\r\n  }\r\n  else{\r\n    return this.replace(\/%(\\w*)%\/g, function(m, key) { return data.hasOwnProperty(key) ? data[key] : &quot;&quot;; });\r\n  }\r\n});\r\n<\/pre>\n<p>the TypeExtend function itself is here: <a href=\"?p=23\" title=\"javascript extender (TypeExtend)\">jump<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goal: to create a quick template based element creation method Everyday task to manage item templates. We have a container and the template of the items. the result will be: to achieve this we have to extend the String object with a template function: the TypeExtend function itself is here: jump<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-794","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=794"}],"version-history":[{"count":2,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/794\/revisions"}],"predecessor-version":[{"id":796,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/794\/revisions\/796"}],"wp:attachment":[{"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=794"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}